"use client"; import React, { useEffect, useRef, useState } from "react"; const DEFAULT_CHARSET = "ｦｧｨｩｪｫｬｭｮｯｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ01234567"; const TRAIL = 10; const FONT_SIZE = 14; const CHAR_DELAY = 60; const LINE_PAUSE = 150; const BLINK_MS = 530; function parseLines(text: string | string[]): string[] { if (Array.isArray(text)) return text.filter(Boolean); return text.split("\n").filter(Boolean); } export interface MatrixHeroProps { text?: string | string[]; speed?: number; paused?: boolean; charset?: string; glowIntensity?: number; className?: string; style?: React.CSSProperties; children?: React.ReactNode; } export function MatrixHero({ text = ["Welcome to the Matrix,", "Neo."], speed = 1, paused = false, charset = DEFAULT_CHARSET, glowIntensity = 1, className, style, children, }: MatrixHeroProps) { useEffect(() => { if (document.getElementById("vt323-font")) return; const link = document.createElement("link"); link.id = "vt323-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=VT323&display=swap"; document.head.appendChild(link); }, []); const canvasRef = useRef(null); const sizeRef = useRef({ w: 0, h: 0 }); const rainRef = useRef<{ head: number; spd: number }[]>([]); const frameRef = useRef(0); const pausedRef = useRef(paused); useEffect(() => { pausedRef.current = paused; }, [paused]); useEffect(() => { const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (!canvasRef.current) return; const canvas: HTMLCanvasElement = canvasRef.current; const ctxOrNull = canvas.getContext("2d"); if (!ctxOrNull) return; const ctx: CanvasRenderingContext2D = ctxOrNull; function resize() { const dpr = Math.min(window.devicePixelRatio, 2); const rect = canvas.getBoundingClientRect(); sizeRef.current = { w: rect.width, h: rect.height }; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); } const ro = new ResizeObserver(resize); ro.observe(canvas); resize(); function draw() { const { w, h } = sizeRef.current; if (w === 0 || h === 0) { frameRef.current = requestAnimationFrame(draw); return; } ctx.font = `${FONT_SIZE}px monospace`; const charW = ctx.measureText("M").width; const charH = FONT_SIZE * 1.2; const cols = Math.floor(w / charW); const rows = Math.floor(h / charH); if (rainRef.current.length !== cols) { rainRef.current = Array.from({ length: cols }, (_, ci) => ({ head: (Math.sin(ci * 7.3) * 0.5 + 0.5) * rows, spd: 0.08 + ((ci * 13) % 17) / 17 * 0.25, })); } if (!reduced && !pausedRef.current) { ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, w, h); ctx.font = `${FONT_SIZE}px monospace`; ctx.textBaseline = "top"; for (let ci = 0; ci < cols; ci++) { const r = rainRef.current[ci]; if (!r) continue; r.head += r.spd * speed; if (r.head - TRAIL > rows) { r.head = -(Math.random() * rows * 0.3); r.spd = 0.08 + Math.random() * 0.25; } } for (let ci = 0; ci < cols; ci++) { const rain = rainRef.current[ci]; if (!rain) continue; for (let ri = 0; ri < rows; ri++) { const dist = rain.head - ri; if (dist < 0 || dist > TRAIL) continue; const t = 1 - dist / TRAIL; const isHead = dist < 1.2; const chIdx = Math.abs(ci * 31 + ri * 17 + Math.floor(rain.head * 2.5)) % charset.length; const ch = charset[chIdx] ?? "0"; ctx.fillStyle = isHead ? `rgba(190,255,190,${(t * 0.85).toFixed(2)})` : `rgba(0,${Math.floor(55 + t * 130)},0,${(t * 0.5).toFixed(2)})`; ctx.fillText(ch, ci * charW, ri * charH); } } } frameRef.current = requestAnimationFrame(draw); } frameRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(frameRef.current); ro.disconnect(); }; }, [speed, charset]); const lines = parseLines(Array.isArray(text) ? text : (text ?? "")); const [displayed, setDisplayed] = useState(() => lines.map(() => "")); const [activeLine, setActiveLine] = useState(0); const [typingDone, setTypingDone] = useState(false); const [cursorOn, setCursorOn] = useState(true); const textKey = typeof text === "string" ? text : JSON.stringify(text); useEffect(() => { const ls = parseLines(Array.isArray(text) ? text : (text ?? "")); setDisplayed(ls.map(() => "")); setActiveLine(0); setTypingDone(false); setCursorOn(true); let lineIdx = 0; let charIdx = 0; let timer: ReturnType; function typeNext() { if (pausedRef.current) { timer = setTimeout(typeNext, 50); return; } const target = ls[lineIdx]; if (!target) { setTypingDone(true); return; } if (charIdx < target.length) { charIdx++; const snap = charIdx; const snap_l = lineIdx; setDisplayed(prev => { const next = [...prev]; next[snap_l] = target.slice(0, snap); return next; }); timer = setTimeout(typeNext, CHAR_DELAY); } else if (lineIdx < ls.length - 1) { lineIdx++; charIdx = 0; setActiveLine(lineIdx); timer = setTimeout(typeNext, LINE_PAUSE); } else { setTypingDone(true); } } timer = setTimeout(typeNext, CHAR_DELAY); return () => clearTimeout(timer); }, [textKey]); useEffect(() => { const id = setInterval(() => setCursorOn(v => !v), BLINK_MS); return () => clearInterval(id); }, []); const g = glowIntensity; const textShadow = g > 0 ? `0 0 ${7 * g}px #00FF41, 0 0 ${16 * g}px #00FF41, 0 0 ${32 * g}px rgba(0,255,65,0.45)` : "none"; return (

); } export default MatrixHero;