We need to create a single-page web app with full-screen canvas black, showing Matrix rain effect with green katakana glyphs, trailing fade, brighter leading char.

We must write index.html containing HTML with style (full-screen, no margin) and script implementing canvas animation.

We need to generate katakana characters: Unicode range Katakana: U+30A0–U+30FF, maybe include random selection. Use array of characters.

Implement classic Matrix rain: separate columns, each with a y position, random speed, draw characters per column each frame, with fade.

Simplify: at each frame, draw semi-transparent black rectangle over canvas (alpha low) to create fade, then draw characters at positions.

Implement using requestAnimationFrame.

Full-screen canvas: set width/height to window.innerWidth/innerHeight, adjust on resize.

Implement config: font size = 16px (or 20). Determine columns = canvas.width / fontSize.

Each column stores y position (in multiples of fontSize). Update y by speed (maybe 1-5). When y * fontSize > canvas.height, reset to 0.

Select random Katakana character for each draw.

Add brighter leading char: draw first char in bright green (e.g., '#CCFFCC') and others in regular green with lower opacity.

Simplify: for each column, when drawing char at (x, y), we can draw char with color for main, but we need trailing fade; using the fade rectangle should create trailing.

But also we can set fillStyle for each char: maybe use varying opacity based on distance from y.

Simpler: just draw all chars same green, but leading char brighter (set fillStyle brighter). The fading effect is from black rectangle overlay with alpha.

Implementation steps in script:

- const canvas = document.getElementById('matrix');
- const ctx = canvas.getContext('2d');
- set canvas width/height.
- const fontSize = 20;
- const columns = canvas.width / fontSize;
- const drops = new Array(columns).fill(0).map(() => Math.random() * canvas.height);
But typical approach: each column has a y position representing the drop height; start at random between 0 and canvas.height.

But to ensure characters stream down, set drops[i] = 1; each frame, draws char at (i*fontSize, drops[i]*fontSize).

When draws, after drawing, increment drops[i] with random speed (e.g., 0.5~1.5). We'll store speed per column.

Simplify: maintain array of y positions, each incremented by 1 each frame (makes good effect). Use reset when y*fontSize > canvas.height.

Prefer use array of y positions (int). Initialize all to 0.

At each frame:

- ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0,0, canvas.width, canvas.height);

- ctx.fillStyle = '#0F0'; ctx.font = `${fontSize}px monospace`;

- For each column i: let text = randomKatakana(); let x = i*fontSize; let y = drops[i] * fontSize; ctx.fillText(text, x, y);

- Then leading char brighter: maybe set fillStyle = '#CFFFCF' before drawing the character at y; but we already drew it; we can draw again with brighter color for the top of each column. Let's store previous y to draw tail fade? But trailing fade handled by black overlay.

Simplify: For each column, draw char with bright color and then set fillStyle back for subsequent frames: We can set fillStyle to bright for the character just drawn, then fade.

Ok: In loop, before draw, set fillStyle to bright color; draw char; then set fillStyle to regular green for next frames.

But we need trailing characters to be slightly dimmer, but fade overlay does that.

Implementation:

for i in columns:
    const char = katakana[Math.floor(Math.random()*katakana.length)];
    const x = i*fontSize;
    const y = drops[i]*fontSize;
    ctx.fillStyle = '#0F0'; //regular green
    ctx.fillText(char, x, y);
    // draw bright leading char
    ctx.fillStyle = '#CFFFCF';
    ctx.fillText(char, x, y);
    // Actually we need both? Not needed. We'll draw bright char first then after line overlay fade darkens but we want leading char brighter; So draw bright char first, but other chars from previous frames are faded.

Simpler: Draw char with bright color. The fade rectangle will make previous frames dimmer gradually.

Thus in each frame, we only draw the newest char per column with bright color. The previous chars will be part of the canvas that have been faded.

Thus set ctx.fillStyle = '#0FF' maybe.

Let's implement: const bright = '#0F0' (green). For overall, maybe just use '#0F0'; overlay fade will dim it.

No need to differentiate.

But requirement: brighter leading character. So we can use bright '#CCFFCC'.

Implementation: ctx.fillStyle = '#CCFFCC' for char.

And the faded trail will appear dim after overlay.

Now code.

Will also add event listener resize to adjust canvas.

Write index.html with style:

html, body {margin:0;height:100%;background:#000;} canvas{display:block;}

Add script.

Implement function getRandomKatakana(): returns char from array.

Define const katakana = [...]; generate via string.fromCharCode.

We can generate range 0x30A0 to 0x30FF and filter maybe exclude punctuation.

Simplify: create array of chars: for(let i=0x30A0;i<=0x30FF;i++) katakana.push(String.fromCharCode(i));

Now code.

Proceed to write file index.html using write tool.