Matrix digital rain · kat-coder-pro-v2
Create the Matrix digital rain effect on a full-screen black canvas: columns of falling green katakana glyphs with a trailing fade and a brighter leading character.
transcript · 6 messages
Create the Matrix digital rain effect on a full-screen black canvas: columns of falling green katakana glyphs with a trailing fade and a brighter leading character.
I'll create a Matrix digital rain effect with falling green katakana glyphs, trailing fade, and brighter leading characters on a full-screen canvas.
/workspace/index.html (3297 bytes)Successfully wrote 3297 bytes to /workspace/index.html
{"path":"/workspace/index.html"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matrix Digital Rain</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; overflow: hidden; width: 100vw; height: 100vh; } canvas { display: block; width: 100vw; height: 100vh; } </style> </head> <body> <canvas id="matrix"></canvas> <script> const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); // Set canvas to full screen canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Handle window resize window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; initColumns(); }); // Katakana characters (48 basic characters) const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'; const chars = katakana.split(''); // Font size and column setup const fontSize = 16; let columns = []; let drops = []; function initColumns() { const columnCount = Math.floor(canvas.width / fontSize); columns = new Array(columnCount).fill(0); drops = new Array(columnCount).fill(0); // Randomize starting positions for (let i = 0; i < columnCount; i++) { drops[i] = Math.floor(Math.random() * canvas.height / fontSize); } } initColumns(); // Draw the rain animation function draw() { // Semi-transparent black to create fade trail effect ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = `${fontSize}px monospace`; // Loop over each column for (let i = 0; i < columns.length; i++) { // Random character const text = chars[Math.floor(Math.random() * chars.length)]; // Position const x = i * fontSize; const y = drops[i] * fontSize; // Leading character is brighter if (Math.random() > 0.95) { ctx.fillStyle = '#fff'; // Very bright leading character } else { ctx.fillStyle = '#0f0'; // Standard green } ctx.fillText(text, x, y); // Reset drop to top randomly after it crosses screen if (y > canvas.height && Math.random() > 0.975) { drops[i] = 0; } // Move drop down drops[i]++; } } // Animation loop setInterval(draw, 33); // ~30 FPS </script> </body> </html>
Done! I've created a single-page web app with the Matrix digital rain effect. The file `index.html` is now in your workspace. **Features:** - Full-screen black canvas - Columns of falling green katakana glyphs (48 characters) - Trailing fade effect created by semi-transparent black overlay - Brighter leading characters (occasionally white for that "head" glow) - Responsive - adapts to window size - Smooth animation at ~30 FPS Just open `index.html` in a browser to see the effect!
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Classic Matrix digital rain with falling green katakana, fading trails, and bright leading characters; animates continuously but is not interactive.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.