We need to create an index.html file containing a full-screen canvas and JavaScript that implements Matrix digital rain. The request: "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."

So we need to write a single self-contained index.html that uses CSS and JS in <style> and <script>. No external resources. So we create HTML with canvas element covering full viewport. JavaScript uses animation loop to draw characters. We'll use a set of katakana characters, or a string of Unicode. Use requestAnimationFrame. We'll maintain an array of columns, each with y positions. We need trailing fade effect: draw a semi-transparent rectangle over whole canvas to fade previous frames. The brighter leading character: draw with a brighter color.

Also black background. We'll use context fillStyle '#0f0' for green and brighter '#0f0' maybe with lighter color.

Let's craft index.html content.

Implementation details: We'll have canvas id="canvas". CSS: body and html margin 0, overflow hidden, background black. Canvas width/height set to window.innerWidth/innerHeight. Resize event. JS: define characters = 'アアイウエオカキクケコサシスセソ... etc' or use Unicode range 0x30A0-0x30FF.

Simplify: use string of katakana. For each column: x position; y position increments. We'll use font size 18px, number of columns = width / fontSize.

In loop, first draw semi-transparent rectangle: context.fillStyle = 'rgba(0,0,0,0.05)'; context.fillRect(0,0,width,height); Then for each column, pick random char from string, draw at x, y with fillStyle = '#0f0'; Then for leading character: maybe use '#fff' or '#0f0' with higher alpha. But we can draw same but with brighter color for the leading char, then after, update y += fontSize.

Need to reset column when y > height + random offset.

Let's craft code.

Also need to set canvas height/width to match. In script, get context = canvas.getContext('2d'); set font.

Also handle window resize.

All content in one file. Use <style> for body, canvas. We'll use 100% width height.

Let's produce final index.html file.

We can write directly with write tool.

Check environment: current dir /tmp/ws. We'll write file index.html.

Let's produce content.

We wrote a file. Need to check if effect matches description: "columns of falling green katakana glyphs with a trailing fade and a brighter leading character". Current code uses a semi-transparent black fill to fade, draws each char same color '#0f0' for all characters, not brighter leading. We didn't implement brighter leading character. We can modify to change leading char color. Also maybe use a brighter color '#0f8' or '#0ff' or brighter green.

Also we need to randomize characters each frame and maybe make leading char brighter. Implementation: in loop, pick char for column; we can store y positions and for each column, track last position? Instead, we can color the first row or the leading character differently. But typical Matrix effect: the leading character brighter (like #0f0). But we can use '#0f8' or '#0ff' for the leading. Or we can use a gradient: set fillStyle for each char individually. We can use rain[i] to track the vertical index. We can use for each column, maintain array of y positions? Simpler: we draw at y coordinate, but we can use an array 'drops' where each drop is a column; each time we increment y, we also draw a bright char at top and darker ones for rest. But to keep simple, we can change color for each char based on its position in the column? We can use a color ramp. But easier: just color each char with '#0f0' for all but the first char? But we don't have prior char; we can set for each frame, we draw a bright char at current y and a darker at y - fontSize maybe? Actually typical effect draws a stream of characters with fading tail, using global alpha.

We could create an array of columns each with an array of characters? Might be overkill.

Simplify: we can draw each column's new char at y; and before incrementing we can use a different color for the new char and set fillStyle for rest? But we only draw one character per column per frame. Actually typical implementation draws a stream of characters: each column draws a string of many characters, but we are drawing only one per column per frame. Our fade effect does trailing.

To have brighter leading char, we can set a different color for the char that just started or for each column, maintain a 'counter' or 'speed'? But we can use a random threshold to set brighter color if y is new: We can treat 'rain[i]' as the current y index; when we reset to 0, we might color the first char bright; but not exactly.

Maybe easiest: we modify draw loop: For each column, we compute y as rain[i] * fontSize. Then set fillStyle to '#0f0'; then after drawing, if we want brighter leading char we could set fillStyle to '#0f8' for each new char? But we need to differentiate between leading and rest. Since we only draw one character per column per frame, leading char will be bright, others will be faded due to rectangle overlay.

But our fade rectangle uses semi-transparent black to fade everything gradually; that's fine.

Thus maybe no need to differentiate color; but requirement says brighter leading character. We can adjust by drawing each column's new character with brighter color '#0f8' or '#0ff', while the rest are same color. But the rest will fade due to overlay.

But if we keep same color, leading char may not be brighter.

Thus modify: inside loop, after drawing char, we set color for the rest? Actually each column draws a single character. Over time, the same column will draw many characters. The first character in each column will be drawn with bright color; others will be drawn with same color. But because of fade, they become dim.

But we may not know which character is leading unless we track start.

Simpler: set color for each char: if y is 0 or when a column resets, we use bright. But that's not exactly leading.

Let's modify: when y > height, we reset to 0. So at y=0 we draw bright. That is fine.

Thus modify code: if y == 0 then set fillStyle '#0ff' else '#0f0'. But when column resets, y=0. But due to increment after draw, y may be 0 only initially. That may not produce continuous bright leads. But it's okay for demonstration.

Alternatively we can use a random chance to create bright character: e.g., if Math.random() > 0.97 use bright color.

But requirement says "brighter leading character" so each stream's leading char should be brighter.

Let's modify: each time we increment rain[i], we use a variable 'heads' to store the current y for bright char? Actually we can store for each column a 'head' index, but we are using same.

Simplify: just change fillStyle to '#0f0' for all except the first drawn char of the column? We'll need to maintain state.

Let's maintain array 'heads' for each column, set to current index when reset; then when drawing, if y == heads[i] then color '#0ff' else '#0f0'.

But since we increment after drawing, heads[i] remains same as previous y? Wait.

Implementation: After drawing char at y = rain[i] * fontSize, if y == head[i], color '#0ff'. Then after increment, if y > height and random, we set rain[i] = 0 and head[i] = 0? But then next frame, y=0 again and bright again.

This will produce bright at start of each stream.

Let's modify accordingly.

Also we need to use correct font weight or color.

Let's edit file.

We need to create index.html with matrix rain. The initial write is done. Need to refine maybe? But the request is to create the Matrix digital rain effect full-screen black canvas. The current code may not work fully; we need trailing fade and brighter leading character. The initial script doesn't handle heads or brighter leading char? It uses same color for all. Need to modify to have brighter leading char.

We need to edit file. Let's open file content to see current.