Cyberpunk Neon Matrix Rain Stream

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk Matrix Rain</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
    </style>
</head>
<body class="h-full relative flex items-center justify-center bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300">

    <div class="absolute z-10 text-center space-y-3 p-6 pointer-events-none">
        <h1 class="text-4xl sm:text-6xl font-extrabold text-emerald-600 dark:text-emerald-400 tracking-wider uppercase drop-shadow-md">
            Matrix <span class="text-slate-900 dark:text-white">Rain</span>
        </h1>
        <p class="text-emerald-600/80 dark:text-emerald-500/80 text-xs sm:text-sm font-mono">
            Click anywhere on the screen to toggle Neon Color modes.
        </p>
    </div>

    <canvas id="matrixCanvas" class="w-full h-full absolute inset-0 z-0"></canvas>

    <script>
        const canvas = document.getElementById("matrixCanvas");
        const ctx = canvas.getContext("2d");

        let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

        const chars = "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        const fontSize = 16;
        let columns = Math.floor(width / fontSize);
        let drops = Array(columns).fill(1);

        const darkColors = ["#10b981", "#06b6d4", "#a855f7", "#f43f5e"];
        const lightColors = ["#059669", "#0891b2", "#7c3aed", "#e11d48"];
        let currentColorIndex = 0;

        function drawMatrix() {
            const isDark = document.documentElement.classList.contains('dark');
            ctx.fillStyle = isDark ? "rgba(0, 0, 0, 0.05)" : "rgba(248, 250, 252, 0.08)";
            ctx.fillRect(0, 0, width, height);

            ctx.fillStyle = isDark ? darkColors[currentColorIndex] : lightColors[currentColorIndex];
            ctx.font = fontSize + "px monospace";

            for (let i = 0; i < drops.length; i++) {
                const text = chars.charAt(Math.floor(Math.random() * chars.length));
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);

                if (drops[i] * fontSize > height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }

        setInterval(drawMatrix, 33);

        window.addEventListener("resize", () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            columns = Math.floor(width / fontSize);
            drops = Array(columns).fill(1);
        });

        window.addEventListener("click", () => {
            currentColorIndex = (currentColorIndex + 1) % darkColors.length;
        });
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file