apps/matrix-frontend/src/components/MatrixRain.tsx

import { useEffect, useRef } from 'react';

const MatrixRain = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const characters = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF<>{}[]|/\\';
    const columnWidth = 20;
    const numColumns = Math.ceil(window.innerWidth / columnWidth);
    
    const columns: HTMLDivElement[] = [];

    for (let i = 0; i < numColumns; i++) {
      const column = document.createElement('div');
      column.className = 'absolute top-0 font-mono text-xs leading-tight select-none pointer-events-none';
      column.style.left = `${i * columnWidth}px`;
      column.style.animationDelay = `${Math.random() * 5}s`;
      column.style.animationDuration = `${5 + Math.random() * 10}s`;
      
      const numChars = Math.floor(Math.random() * 20) + 10;
      let html = '';
      
      for (let j = 0; j < numChars; j++) {
        const char = characters[Math.floor(Math.random() * characters.length)];
        const opacity = 1 - (j / numChars);
        const isHead = j === 0;
        html += `<div style="opacity: ${opacity * 0.6}; color: ${isHead ? 'hsl(166, 100%, 70%)' : 'hsl(166, 100%, 50%)'}">${char}</div>`;
      }
      
      column.innerHTML = html;
      column.style.animation = `matrix-fall ${8 + Math.random() * 8}s linear infinite`;
      column.style.animationDelay = `${-Math.random() * 15}s`;
      
      columns.push(column);
      container.appendChild(column);
    }

    // Update characters periodically
    const interval = setInterval(() => {
      columns.forEach(column => {
        const divs = column.querySelectorAll('div');
        divs.forEach(div => {
          if (Math.random() > 0.95) {
            div.textContent = characters[Math.floor(Math.random() * characters.length)];
          }
        });
      });
    }, 100);

    return () => {
      clearInterval(interval);
      columns.forEach(col => col.remove());
    };
  }, []);

  return (
    <div 
      ref={containerRef}
      className="fixed inset-0 overflow-hidden pointer-events-none z-0"
      style={{ opacity: 0.15 }}
    />
  );
};

export default MatrixRain;