Spaces:

MarkTheArtist
/

matrix-code-rain

Running

File size: 14,366 Bytes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix Code Rain</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
        
        body {
            font-family: 'Inconsolata', monospace;
            overflow: hidden;
            background-color: #000;
            margin: 0;
            padding: 0;
        }
        
        .matrix-column {
            position: relative;
            display: inline-block;
            color: #20C20E;
            text-shadow: 0 0 5px #20C20E;
            width: 20px;
            height: 100vh;
            overflow: hidden;
        }
        
        .matrix-char {
            position: absolute;
            opacity: 0;
            animation: 
                fadeIn 0.1s forwards,
                fall linear forwards;
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }
        
        @keyframes fall {
            to { transform: translateY(100vh); }
        }
        
        .glitch {
            position: relative;
        }
        
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
        }
        
        .glitch::before {
            left: 2px;
            text-shadow: -2px 0 #ff00c1;
            clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }
        
        .glitch::after {
            left: -2px;
            text-shadow: -2px 0 #00fff9;
            clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
            animation: glitch-anim-2 2s infinite linear alternate-reverse;
        }
        
        @keyframes glitch-anim-1 {
            0% { transform: translateX(0); }
            20% { transform: translateX(-3px); }
            40% { transform: translateX(3px); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
            100% { transform: translateX(0); }
        }
        
        @keyframes glitch-anim-2 {
            0% { transform: translateX(0); }
            20% { transform: translateX(3px); }
            40% { transform: translateX(-3px); }
            60% { transform: translateX(3px); }
            80% { transform: translateX(-3px); }
            100% { transform: translateX(0); }
        }
        
        .scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                rgba(32, 194, 14, 0.1) 0%,
                rgba(32, 194, 14, 0.1) 50%,
                rgba(32, 194, 14, 0) 51%
            );
            background-size: 100% 8px;
            animation: scanline 8s linear infinite;
            pointer-events: none;
            z-index: 100;
        }
        
        @keyframes scanline {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(32, 194, 14, 0.7);
            transform: scale(0);
            opacity: 1;
            pointer-events: none;
            animation: ripple 1s linear;
        }
        
        @keyframes ripple {
            to {
                transform: scale(30);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="bg-black text-green-500 h-screen w-screen flex flex-col">
    <!-- Header with glitch effect -->
    <header class="p-4 border-b border-green-500/20 relative overflow-hidden">
        <h1 class="glitch text-3xl font-bold text-center" data-text="MATRIX CODE RAIN">MATRIX CODE RAIN</h1>
        <div class="absolute top-0 left-0 w-full h-full bg-green-500/5 pointer-events-none"></div>
    </header>
    
    <!-- Main matrix display -->
    <main class="flex-1 relative overflow-hidden">
        <div id="matrix-container" class="h-full w-full flex justify-center items-center"></div>
        <div class="scanline"></div>
    </main>
    
    <!-- Footer with controls -->
    <footer class="p-4 border-t border-green-500/20 flex justify-between items-center">
        <div class="flex space-x-4">
            <button id="speed-up" class="px-3 py-1 bg-green-900/50 border border-green-500 rounded hover:bg-green-800/70 transition">
                <span class="text-xs">SPEED +</span>
            </button>
            <button id="speed-down" class="px-3 py-1 bg-green-900/50 border border-green-500 rounded hover:bg-green-800/70 transition">
                <span class="text-xs">SPEED -</span>
            </button>
            <button id="density-up" class="px-3 py-1 bg-green-900/50 border border-green-500 rounded hover:bg-green-800/70 transition">
                <span class="text-xs">DENSITY +</span>
            </button>
            <button id="density-down" class="px-3 py-1 bg-green-900/50 border border-green-500 rounded hover:bg-green-800/70 transition">
                <span class="text-xs">DENSITY -</span>
            </button>
        </div>
        <div class="text-xs opacity-70">
            <span id="fps-counter">FPS: 0</span>
        </div>
        <button id="toggle-matrix" class="px-3 py-1 bg-green-900/50 border border-green-500 rounded hover:bg-green-800/70 transition">
            <span class="text-xs">TOGGLE MATRIX</span>
        </button>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Configuration
            const config = {
                columns: 80,
                minChars: 5,
                maxChars: 25,
                speed: 2, // Lower is faster
                density: 0.8,
                chars: "日ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍｦｲｸｺｿﾁﾄﾉﾌﾔﾖﾙﾚﾛﾝ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ",
                running: true
            };
            
            // State
            let columns = [];
            let lastFrameTime = 0;
            let fps = 0;
            let frameCount = 0;
            let lastFpsUpdate = 0;
            
            // DOM elements
            const matrixContainer = document.getElementById('matrix-container');
            const fpsCounter = document.getElementById('fps-counter');
            
            // Initialize matrix
            function initMatrix() {
                matrixContainer.innerHTML = '';
                columns = [];
                
                // Calculate column width based on container width
                const columnWidth = Math.max(20, window.innerWidth / config.columns);
                
                for (let i = 0; i < config.columns; i++) {
                    const column = document.createElement('div');
                    column.className = 'matrix-column';
                    column.style.width = `${columnWidth}px`;
                    column.style.height = '100vh';
                    
                    // Random delay for each column
                    column.dataset.delay = Math.random() * 2000;
                    column.dataset.lastUpdate = 0;
                    column.dataset.speed = config.speed + Math.random() * 2 - 1;
                    
                    matrixContainer.appendChild(column);
                    columns.push(column);
                    
                    // Initial characters
                    const initialChars = Math.floor(Math.random() * (config.maxChars - config.minChars) + config.minChars);
                    for (let j = 0; j < initialChars; j++) {
                        addCharToColumn(column, -j * 20);
                    }
                }
            }
            
            // Add a character to a column at specific position
            function addCharToColumn(column, yPos) {
                const char = document.createElement('div');
                char.className = 'matrix-char';
                char.textContent = getRandomChar();
                
                // Random brightness
                const brightness = Math.random();
                if (brightness > 0.8) {
                    char.style.color = '#FFFFFF';
                    char.style.textShadow = '0 0 8px #FFFFFF';
                } else if (brightness > 0.5) {
                    char.style.color = '#20C20E';
                    char.style.textShadow = '0 0 5px #20C20E';
                } else {
                    char.style.color = '#0A5C07';
                    char.style.textShadow = 'none';
                }
                
                // Set random animation duration between 2-5 seconds
                const duration = 2 + Math.random() * 3;
                char.style.animationDuration = `${duration}s`;
                
                // Set initial position
                char.style.left = '0';
                char.style.top = `${yPos}px`;
                
                column.appendChild(char);
                
                // Remove character after animation completes
                setTimeout(() => {
                    char.remove();
                }, duration * 1000);
            }
            
            // Generate random matrix character
            function getRandomChar() {
                return config.chars.charAt(Math.floor(Math.random() * config.chars.length));
            }
            
            // Update a single column
            function updateColumn(column, now) {
                const lastUpdate = parseFloat(column.dataset.lastUpdate);
                const speed = parseFloat(column.dataset.speed);
                
                if (now - lastUpdate < speed * 100) return;
                
                // Skip some updates based on density
                if (Math.random() > config.density) return;
                
                column.dataset.lastUpdate = now;
                
                // Add new character at top
                addCharToColumn(column, -20);
                
                // Randomly reset the column
                if (Math.random() < 0.005) {
                    const chars = column.querySelectorAll('.matrix-char');
                    chars.forEach(char => {
                        char.style.opacity = '0';
                        char.style.transition = 'opacity 0.5s ease';
                    });
                }
            }
            
            // Main animation loop
            function animate(now) {
                if (!lastFrameTime) lastFrameTime = now;
                const deltaTime = now - lastFrameTime;
                lastFrameTime = now;
                
                frameCount++;
                if (now - lastFpsUpdate >= 1000) {
                    fps = Math.round((frameCount * 1000) / (now - lastFpsUpdate));
                    fpsCounter.textContent = `FPS: ${fps}`;
                    lastFpsUpdate = now;
                    frameCount = 0;
                }
                
                if (config.running) {
                    columns.forEach(column => updateColumn(column, now));
                }
                
                requestAnimationFrame(animate);
            }
            
            // Event listeners for controls
            document.getElementById('speed-up').addEventListener('click', () => {
                config.speed = Math.max(0.5, config.speed - 0.5);
            });
            
            document.getElementById('speed-down').addEventListener('click', () => {
                config.speed = Math.min(5, config.speed + 0.5);
            });
            
            document.getElementById('density-up').addEventListener('click', () => {
                config.density = Math.min(1, config.density + 0.1);
            });
            
            document.getElementById('density-down').addEventListener('click', () => {
                config.density = Math.max(0.1, config.density - 0.1);
            });
            
            document.getElementById('toggle-matrix').addEventListener('click', () => {
                config.running = !config.running;
                document.getElementById('toggle-matrix').querySelector('span').textContent = 
                    config.running ? 'TOGGLE MATRIX' : 'RESUME MATRIX';
            });
            
            // Handle window resize
            window.addEventListener('resize', () => {
                initMatrix();
            });
            
            // Start everything
            initMatrix();
            requestAnimationFrame(animate);
            
            // Easter egg - click anywhere to create a ripple effect
            document.addEventListener('click', (e) => {
                const ripple = document.createElement('div');
                ripple.className = 'ripple';
                ripple.style.left = `${e.clientX - 10}px`;
                ripple.style.top = `${e.clientY - 10}px`;
                ripple.style.width = '20px';
                ripple.style.height = '20px';
                
                document.body.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 1000);
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/matrix-code-rain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>