Matrix digital rain · seed-2.0-mini

Got it, let's tackle this problem step by step. I need to create a Matrix-style digital rain effect in a single index.html file, all inline CSS and JS. Let's start by breaking down the requirements:

First, the structure: HTML with a canvas element that covers the full screen. The canvas needs to be resized to fit the viewport. Then, CSS to make the canvas fullscreen, black background.

Next, the JavaScript part:
1.  Columns of katakana characters. Each column moves down at a different speed.
2.  Each column has a leading character (brighter) and fading trail (so the top ones are more transparent/dim).
3.  Pause/Resume and Restart buttons.
4.  When columns go off the bottom, recycle them so they come back from the top.
5.  Handle window resizing to adjust the canvas and columns.

Let's outline the code:

HTML structure:
- Canvas with id "matrixCanvas"
- Controls: Pause/Resume and Restart buttons, styled simply.

CSS:
- Body margin 0, overflow hidden, background black.
- Canvas position fixed, top 0, left 0, z-index -1 (or wait, no—we need the animation to be on top? Wait no, the background is black, so canvas covers the whole screen. But buttons need to be visible, so maybe canvas is behind the buttons. Wait, no: let's make the body black, canvas is full size, z-index 0, buttons z-index 1, positioned at top maybe.

JavaScript:
- Get the canvas context.
- Set up variables: columns, column width, font size, each column's y position, speed, etc.
- Katakana characters: range from 0x30A0 to 0x30FF (katakana in Unicode).
- The animation loop using requestAnimationFrame.
- For each frame: draw a semi-transparent black rectangle over the canvas to create the trail effect (this fades out the old frames).
- Then, for each column: draw a character at the current y position (bright green, like #0F0 or #00FF00), then move the y position down. When y is beyond canvas height, reset to top (recycle). Each column has a speed (different for each, so some are faster/slower).
- Buttons: event listeners for pause (toggle playing), restart (reset all columns, clear canvas).
- Resize event: adjust canvas width and height, recalculate columns based on new width (column width = font size, so number of columns is Math.floor(canvas.width / fontSize)).

Wait, let's pick a font size, say 20px. So each column is 20px wide. Then number of columns is canvas width divided by 20. Each column's x position is index * 20.

Each column has:
- y: current y position (starts at some random value between 0 and -canvas height, so they don't all start at top)
- speed: random between 2 and 10 (pixels per frame? Wait, requestAnimationFrame is ~60fps, so speed per frame should be a number like that.)
- characters: maybe each column has its own sequence, but since it's random, each frame we pick a random katakana for the current position.

Wait, the leading character is the one at the top of the column? No, wait, the Matrix rain: the leading character is the bottom one, and the ones above are trailing, fading. Wait no, wait as the column moves down, the top is the newest (brightest) and the lower ones are the trail? Wait no, let's think: when the column falls, the first character is at the top, then it moves down, adding new ones below. Wait no, let's get it right: the typical Matrix effect is a vertical stream where the top character is bright, and the ones below are dimmer, and as they move down, they fall, so the stream is a line going down. So each column is a vertical line of characters, with the topmost being the brightest, and each subsequent one lower is dimmer (and eventually fades away, or gets replaced as the column moves).

Wait, let's adjust: for each column, we have a y position. The character at (column x, y) is the leading (brightest), then the characters above (y - fontsize, y - 2*fontsize, etc.) are dimmer, and each frame we add a new character below? No, wait no—if the column moves down, then each frame the entire stream moves down by speed, so the leading character (the brightest) is at the bottom of the stream? Wait maybe I should look up the standard Matrix rain implementation. Oh right, standard is: each column is a vertical sequence, each new character is added at the top, and all characters move down, so the bottom character is the oldest and fades. Wait no, no—wait let's think of the demo: when you see Matrix, the streams are going down, and the bright character is at the bottom of the stream, and the ones above are dimmer, fading as they go up. So yes, that's the way.

Wait let's code that: for each column, track the y of the head (the bright character). Then, each frame:
1.  Draw a semi-transparent black rect (alpha ~0.05) over the entire canvas, so old frames are faded.
2.  For each column:
    a.  Pick a random katakana character.
    b.  Draw it at (x, headY) with full green (bright).
    c.  Then, draw a number of characters above (like 10 characters), each one dimmer (alpha decreases as we go up).
    d.  Move headY down by speed.
    e.  If headY is beyond canvas height, reset headY to a random negative value (so it comes back from the top, not all at once).

Wait no, maybe the semi-transparent background is the way to get the trail: each frame, draw black with low alpha, so previous frames are still visible but faded, and new characters are drawn on top. That makes sense, because then you don't have to track each character—just the current head, and the fading is done automatically by the overlay.

Wait let's confirm: if every frame we draw ctx.fillStyle = 'rgba(0,0,0,0.05)', fillRect(0,0,canvas.width, canvas.height), then draw the new characters in green, then that creates the trail effect, because each old character is covered by the semi-transparent black, so it's darker each frame. And the leading character is the one that's most recent, so it's brighter. That's a simple way.

Yes, that's a common method. So that would handle the fading trail.

Then, columns: each column is at a fixed x position, spaced by font size (so each column is fontSize pixels apart). Each column has:
- x: column index * fontSize
- y: current head y position
- speed: random value between, say, 1 and 5 (so each column moves at a different speed)
- maybe a random offset so they don't all start at the same time, so the streams are staggered.

Then, the Pause button: when clicked, set a flag like isPlaying to false, so the animation loop doesn't run. Resume sets it back to true. Restart: reset all columns' y positions, and maybe clear the canvas? Wait, no, if we do the semi-transparent overlay, clearing is not needed, but if we restart, we can reset all the columns' y to start, and maybe the overlay will clear the old trails over time. Wait but let's test: when you restart, you want the old trails to go away, so maybe when restart is pressed, we can set isPlaying to false, clear the canvas, then reset, then start again. Or, better, when restart, we can reset all the column y positions, and since the overlay is applied each frame, the old trails will fade out as new frames are drawn.

Wait let's outline the variables:

const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
const fontSize = 20;
let columns = [];
let isPlaying = true;

function initColumns() {
    const numColumns = Math.floor(canvas.width / fontSize);
    columns = [];
    for (let i = 0; i < numColumns; i++) {
        columns.push({
            x: i * fontSize,
            y: Math.random() * -canvas.height, // start above the screen, random
            speed: Math.random() * 3 + 1 // speed between 1 and 4
        });
    }
}

Then, the katakana function: function getRandomKatakana() { return String.fromCharCode(0x30A0 + Math.floor(Math.random() * 96)); } (since katakana is 96 characters: from 0x30A0 to 0x30FF).

Then, the draw function:

function draw() {
    if (!isPlaying) return;

    // Draw semi-transparent black to fade previous frames
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0F0'; // bright green
    ctx.font = `${fontSize}px monospace`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    for (const col of columns) {
        // Draw current character (head)
        const char = getRandomKatakana();
        ctx.fillText(char, col.x + fontSize / 2, col.y);

        // Move head down
        col.y += col.speed;

        // If head goes off bottom, reset to top
        if (col.y > canvas.height) {
            col.y = Math.random() * -canvas.height;
        }
    }

    requestAnimationFrame(draw);
}

Then, handle resize: when window is resized, set canvas.width = window.innerWidth, canvas.height = window.innerHeight, then reinitColumns().

Then, buttons: Pause/Resume button click: toggle isPlaying, change button text. Restart button: reset columns, maybe also clear the canvas (to remove old trails immediately). Wait, when restart, we can do:

function restart() {
    isPlaying = false;
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fillRect(0,0,canvas.width,canvas.height); // clear entire canvas
    initColumns();
    isPlaying = true;
}

And pause/resume:

function togglePause() {
    isPlaying = !isPlaying;
    document.getElementById('pauseBtn').textContent = isPlaying ? 'Pause' : 'Resume';
}

Then, initialize everything: when the page loads, set canvas size, init columns, start draw loop.

Wait also, make sure the canvas is styled properly: in CSS, body { margin:0; padding:0; background: #000; }, canvas { display: block; } (so no scrollbars). Buttons: position absolute, top: 10px, left: 10px, z-index: 1, padding: 8px, font-size: 16px, background: #333, color: #0F0, border: 1px solid #0F0.

Wait let's put all together. Let's write the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Matrix Rain</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            font-family: monospace;
        }
        canvas {
            display: block;
        }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }
        button {
            background: #111;
            color: #0f0;
            border: 1px solid #0f0;
            padding: 8px 16px;
            font-size: 16px;
            margin-right: 8px;
            cursor: pointer;
        }
        button:hover {
            background: #222;
        }
    </style>
</head>
<body>
    <canvas id="matrixCanvas"></canvas>
    <div class="controls">
        <button id="pauseBtn">Pause</button>
        <button id="restartBtn">Restart</button>
    </div>

    <script>
        const canvas = document.getElementById('matrixCanvas');
        const ctx = canvas.getContext('2d');
        const fontSize = 20;
        let columns = [];
        let isPlaying = true;

        // Set canvas size to window
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initColumns();
        }

        // Initialize columns
        function initColumns() {
            const numColumns = Math.floor(canvas.width / fontSize);
            columns = [];
            for (let i = 0; i < numColumns; i++) {
                columns.push({
                    x: i * fontSize,
                    y: Math.random() * -canvas.height,
                    speed: Math.random() * 3 + 1 // Speed between 1 and 4
                });
            }
        }

        // Get random Katakana character
        function getRandomKatakana() {
            return String.fromCharCode(0x30A0 + Math.floor(Math.random() * 96));
        }

        // Animation loop
        function draw() {
            if (!isPlaying) return;

            // Fade previous frames
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw characters
            ctx.fillStyle = '#0F0';
            ctx.font = `${fontSize}px monospace`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            for (const col of columns) {
                const char = getRandomKatakana();
                ctx.fillText(char, col.x + fontSize / 2, col.y);

                // Move column down
                col.y += col.speed;

                // Recycle column when off bottom
                if (col.y > canvas.height) {
                    col.y = Math.random() * -canvas.height;
                }
            }

            requestAnimationFrame(draw);
        }

        // Toggle pause/resume
        function togglePause() {
            isPlaying = !isPlaying;
            document.getElementById('pauseBtn').textContent = isPlaying ? 'Pause' : 'Resume';
            if (isPlaying) draw(); // Restart animation if we were paused
        }

        // Restart animation
        function restart() {
            isPlaying = false;
            // Clear canvas immediately
            ctx.fillStyle = 'rgba(0, 0, 0, 1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            initColumns();
            isPlaying = true;
            draw();
        }

        // Event listeners
        document.getElementById('pauseBtn').addEventListener('click', togglePause);
        document.getElementById('restartBtn').addEventListener('click', restart);
        window.addEventListener('resize', resizeCanvas);

        // Initialize and start
        resizeCanvas();
        draw();
    </script>
</body>
</html>

Wait let's check this code:

- Canvas covers full window, no scrollbars.
- Buttons at top left, styled with green text, dark background.
- Each column moves at different speed, starts above the screen, recycles when it goes off bottom.
- Uses semi-transparent black to create fading trail.
- Leading character is bright (full green), and since the previous frames are faded, the trail is dim.
- Pause button toggles, changes text. Restart clears canvas, resets columns.
- Handles resize: when window resizes, canvas size changes, columns reinitialized to fit new width.

Wait but wait: when we resize, the initColumns is called, which calculates number of columns based on new width, so that's correct.

Is this self-contained? Yes, all CSS and JS inline, no external resources. Uses monospace font (so characters align properly, since katakana are monospaced). That's good.

Now, let's write this to index.html, using write tool. The path is index.html, content is the above HTML.

Great, the file is written. Now I need to verify it. Let's run the browser to check the functionality. The task says to run the application in the browser, so use the browser tool. Let's start by reloading (though it's new, maybe just inspect or screenshot to check initial state). Wait, the browser tool's action: let's do a reload, then maybe screenshot to see the initial animation, check if columns are moving, pause/resume works, restart clears trails.

Wait, let's use the browser tool to run the index.html. The action: maybe first, reload (since the file is written, reload will load it). Then, check the elements. Let's call browser with action 'reload', then maybe 'screenshot' to see. But wait, the browser tool: the parameters are action. Let's do action 'reload' first, then after that, maybe inspect or screenshot. Let's try:

Hmm, the animation is only showing a single glyph? Wait maybe the fade is too strong? Wait in my code, when drawing trails I use ctx.fillStyle = 'rgba(0,0,0,0.05)'. So every frame, it adds a semi-transparent black rect to fade previous frames. But maybe the problem is that the font is too small or alignment is off? Wait let me check the code: I set textAlign to center and draw at x + fontSize/2, but columns are spaced every fontSize, so x is at i*fontSize, so that would be correct. Wait maybe the speed is too slow? Wait also the leading character should be brighter, but my code draws all same color. Oh right, the required behavior says brighter leading character, fading trail. Currently all are same green. That's a missing part. Also maybe the canvas isn't filling properly, let's adjust the code to fix these. Let me edit index.html to make the leading glyph brighter, and adjust the fade, and maybe fix alignment.

Okay, now I fixed the trail effect with leading bright white, trailing green with opacity, adjusted fade strength. Now reload the browser to test changes.

Wait, only a few characters are showing up. Maybe the initialization of columns is only a small number? Let's check the numColumns: in initColumns, Math.floor(canvas.width / fontSize). If canvas is large, let's make sure fontSize is correct. Also, maybe the trail is using rgba with 0.25, but let's increase the numColumns to like 2x? Or maybe adjust the y position when recycling: currently when it's off the screen, it's set to -canvas.height, but maybe that's okay. Wait, let's adjust the numColumns to be a bit more, like Math.floor(canvas.width / fontSize) * 2? Or wait, no, maybe the canvas is not taking full width? Let's check the body has overflow hidden, yes. Wait another thing: the initial draw is called once, but when resuming, it's called again, but let's see the code: in restart, isPlaying is set to false, then clear canvas, init columns, then isPlaying = true; then draw(); which starts the loop again. Let's test if we have enough columns. Alternatively, maybe adjust the fontSize to be a bit smaller, like 18, but let's edit the code to set numColumns to Math.floor(canvas.width / fontSize) * 1.5, no, wait let's check: when we open the index.html, the canvas is full window, so if window is large, columns count is okay, but maybe the animation is too slow. Wait let's adjust the speed to be higher: speed between 2 and 5 instead of 1 to 4. Let's edit that line: speed: Math.random() * 3 + 2. Also, maybe the trail: let's increase the number of trails to 4, and not have the leading char as white, maybe #0ff (bright cyan green?) no, original Matrix is bright green. Let's set leading char to #0f0 bright, trail to rgba(0,255,0, 0.75), 0.5, 0.25, so that it fades properly. Also, maybe the fade rect is 0.05 is too slow, let's make it 0.08, so that trails are shorter. Let's edit these parts.

Now let's reload the browser to see if this fixes the animation, more columns, faster speed, better trails.

Hmm, still not seeing the effect. Wait, maybe the fontSize is too big? Or maybe the canvas is not filling the view properly. Wait, let's check the code: when we resize the canvas, we set canvas.width and canvas.height to window.innerWidth and window.innerHeight, which is correct. Let me try to adjust the fontSize to a smaller value, like 16, so more columns fit, and the characters are visible. Let me edit that:

Let's reload again and see.

Great, now the animation looks correct: multiple columns, bright white leading characters with dim green trails, moving down. Let me check if pause/resume works. Let's click the Pause button.

Great! The animation is working: columns are moving vertically, each has a bright white leading character and green fading trail (perfect!). Pause button changed to Resume, so pause works. Now check Restart functionality. Let's click the Restart button and see if it clears trails.

Perfect! The restart works: the screen goes black immediately (cleared all trails). Now let's resume:

Perfect! The animation is working correctly now: columns are moving down, leading characters are white, trails are fading green, columns are varying speeds, Pause/Resume works, Restart clears everything and resets. Let me check all required behaviors:

1. Multiple independently moving columns: Yes, all columns are moving at different speeds.
2. Brighter leading character: The top of each column is white, trail is green and fading.
3. Fading trail: The lower characters in each column are dimmer, blending into the black background.
4. Varying column speed: The speed is between 2-5, so some columns are faster than others.
5. Recycle columns: When a column goes off bottom, it starts from top again.
6. Pause/Resume: Clicking Pause freezes, clicking Resume continues.
7. Restart: Clicking it clears all trails, resets columns.
8. Resize: The canvas is set to window size, so resizing would work.

All required features are implemented correctly, so the final index.html is ready.

The code is complete and all required functionalities are working: animated Matrix rain with green katakana, brighter leading characters, fading trails, varying column speeds, pause/resume, restart, and responsive canvas. The final file is written to index.html.