Matrix Digital Rain Effect in JavaScript (Canvas)

About this lesson

The falling green code from The Matrix is one of the most recognizable effects on the web — and one of the smallest to build. No library, no shaders, no images. About forty lines of plain Canvas 2D. In this tutorial we scaffold a TypeScript project with Vite from the command line, write it in the editor, and run it in the browser. Source code: https://github.com/GoCelesteAI/matrix-digital-rain What You'll Build (scaffolded with the CLI, in TypeScript): - The full Matrix digital rain: columns of katakana and digits falling down the screen, each with a bright leading glyph and a fading green tail. - The one trick that makes the tail: painting a nearly-transparent black over the canvas each frame instead of clearing it. - The iconic glyphs without pasting non-ASCII — built from character codes with String.fromCharCode. - The whole render loop in plain Canvas 2D — getContext, fade, draw, requestAnimationFrame. - Zero graphics dependencies: npm create vite (vanilla-ts), no library install, write index.html + src/main.ts, then npm run dev. Timestamps: 0:00 - Intro — the falling green code 0:26 - See the effect 0:46 - The plan — the one trick 1:12 - Scaffold the project (no library) 2:01 - Write the canvas code in main.ts 2:55 - The trick — a translucent fill each frame 3:39 - Run it with npm run dev 3:46 - The finished effect 4:06 - Recap Key Takeaways: 1. The fading tail is one translucent fill — rgba(2,6,8,0.08) drawn over the whole canvas each frame, not a clear. Its alpha sets the tail length. 2. You never track the trail. You draw only the new head glyph; the fade dims the rest for you, so each column needs just one number — the row of its head. 3. The katakana glyphs are generated from character codes (String.fromCharCode over 0x30A0–0x30FF), so your source stays ASCII. 4. Random resets keep the columns out of sync: once a column passes the bottom, it only restarts when Math.random() clears 0.975, giving the organic, staggered look. 5. It's plain Canvas 2D: get

Original Description