Matrix digital rain · gpt-5.1-codex-mini
Output generated Cost / run $0.0027 Runtime 13.1s
Prompt for this run
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.
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
METRICS
Transcript · 8 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.
thinking
**Creating index.html structure** I need to create a single file called index.html that incorporates multiple tags. I'm thinking through the structure I’ll use. It'll help to inspect the tree to see how everything fits together, ensuring that I’m not missing anything important. I want it to be organized and easy to understand, while making sure all the necessary elements are included. Let’s figure out how best to set this up!
{"command":"pwd"}/tmp/ws
thinking
**Creating a digital rain effect** I need to create an `index.html` file for a matrix digital rain animation. It should utilize a full-screen canvas for the effect. The CSS styles for the `html` and `body` will set the margin to 0 and the background to black, while the canvas needs to fill the entire screen. I’ll write the JavaScript to run the animation and ensure I handle the file creation correctly. Let’s get started on this!
index.html (2582 bytes)Successfully wrote 2582 bytes to index.html
{"path":"index.html"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Matrix Rain</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #000; overflow: hidden; font-family: system-ui, sans-serif; } canvas { display: block; position: absolute; inset: 0; background: #000; } </style> </head> <body> <canvas id="matrix"></canvas> <script> const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); let width = canvas.width = window.innerWidth; let height = canvas.height = window.innerHeight; window.addEventListener('resize', () => { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; initializeColumns(); }); const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'; const fontSize = 20; const columns = []; const maxTrail = 30; const green = '#0F0'; const brightGreen = '#7CFC00'; function randomChar() { return katakana.charAt(Math.floor(Math.random() * katakana.length)); } function initializeColumns() { columns.length = 0; const columnCount = Math.floor(width / fontSize); for (let i = 0; i < columnCount; i++) { columns.push({ x: i * fontSize, y: Math.random() * -1000, speed: fontSize + Math.random() * fontSize, trail: [] }); } } initializeColumns(); ctx.font = `${fontSize}px 'Consolas', 'Courier New', monospace`; function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; ctx.fillRect(0, 0, width, height); columns.forEach(col => { col.y += col.speed; if (col.y > height + col.trail.length * fontSize) { col.y = Math.random() * -1000; col.trail.length = 0; } col.trail.unshift({ char: randomChar(), y: col.y }); if (col.trail.length > maxTrail) { col.trail.pop(); } col.trail.forEach((entry, index) => { const fade = 1 - index / maxTrail; ctx.fillStyle = `rgba(15, 255, 15, ${fade * 0.7})`; ctx.fillText(entry.char, col.x, entry.y - index * fontSize); }); const lead = col.trail[0]; if (lead) { ctx.fillStyle = brightGreen; ctx.fillText(lead.char, col.x, lead.y); } }); requestAnimationFrame(draw); } draw(); </script> </body> </html>
Created `index.html` with a full-screen Matrix rain animation rendered on a canvas. Let me know if you’d like any additional effects or tweaks!