/* global React */ const { useEffect, useRef, useState } = React; function MatrixRain({ enabled = true }) { const canvasRef = useRef(null); const rafRef = useRef(0); useEffect(() => { if (!enabled) return; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); let w = 0, h = 0, cols = 0, drops = []; const fontSize = 14; const chars = "01アカサタナハマヤラワABCDEF{}<>/$_=*•".split(""); const resize = () => { const dpr = Math.min(2, window.devicePixelRatio || 1); w = canvas.clientWidth; h = canvas.clientHeight; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); cols = Math.ceil(w / fontSize); drops = new Array(cols).fill(0).map(() => Math.random() * -h); }; resize(); const ro = new ResizeObserver(resize); ro.observe(canvas); let last = 0; const speed = 55; // ms per step const draw = (t) => { rafRef.current = requestAnimationFrame(draw); if (t - last < speed) return; last = t; // fade trail ctx.fillStyle = "rgba(5, 5, 5, 0.08)"; ctx.fillRect(0, 0, w, h); ctx.font = `${fontSize}px JetBrains Mono, monospace`; for (let i = 0; i < cols; i++) { const x = i * fontSize; const y = drops[i]; const ch = chars[(Math.random() * chars.length) | 0]; // head ctx.fillStyle = "rgba(0, 255, 159, 0.9)"; ctx.fillText(ch, x, y); // tail color ctx.fillStyle = "rgba(124, 58, 237, 0.35)"; ctx.fillText(ch, x, y - fontSize); if (y > h && Math.random() > 0.975) { drops[i] = -fontSize; } else { drops[i] += fontSize; } } }; rafRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); }; }, [enabled]); return (