Focus screen, stream backdrop, screensaver, party visuals: the Matrix rain rebuilt with the CRT layer, procedural audio, and volumetric 3D every other copy skips. 21 scenes, UHD, free on SevinHub.
The Matrix rain scene is one of the most-imitated visuals in film history. Type "matrix rain codepen" into any search engine and you get thousands of attempts. Almost all of them are missing the same three things, and once you know what to look for, you can't unsee it.
I built one that has them, wrapped it in a full-screen terminal, and shipped it as a free tool on SevinHub. And after the first round of feedback, it grew into something bigger: 21 scenes, true volumetric 3D rain, UHD rendering, and a webcam mirror mode.
What do you actually use this for?
Fair question. A pretty animation is worth one visit. Here is why people keep it open:
- Focus screen. Full-screen it on a second monitor while you work. The procedural hum and rain clicks are a built-in white-noise machine, so it replaces your lofi tab and your noise app in one window. The FREEFALL scene with sound on is the deep-work setting.
- Stream and video backdrop. Capture the tab in OBS for "starting soon" screens, intros, or background layers. Zen mode hides the interface so the frame is pure rain, and red pill mode flips the set red for alert segments. MIRROR puts your own face in the code for reaction clips.
- Screensaver for any spare screen. Old tablet, spare TV, hallway monitor: open the page, press F, walk away. No install, no account. The quality selector lets weak hardware run light while a 4K TV runs Ultra.
- Office and shop displays. IT companies, security teams, repair shops: on a lobby screen it says "we are technical" louder than any poster.
- Party and event visuals. A projector plus the HYPERDRIVE or STORM scene is instant venue. LAN nights, Halloween, escape rooms.
- Wind-down ambience. FREEFALL at low volume is a slow 3D glyph field with a deep bass pulse every eight seconds. Better than a fireplace loop.
Your scene, quality, zoom, and audio choices are remembered between visits, so whatever setup you land on is one click to restore.
What every other Matrix rain misses
Most versions online are a plain 2D canvas loop: pick a random column, drop katakana characters, fade them out. That's it. The result is recognizable, but it feels like a screensaver, not the movie.
Watch the actual 1999 opening frames back and you notice three layers the copies never bother with:
- The screen is a CRT. The rain is being pumped through phosphor tubes with scanlines, a slight barrel curve, chromatic edge fringing, and that constant 60Hz mains flicker analog monitors had. Modern flat panels are too clean.
- The room has sound. Server-room ambient hum. Filtered noise. A deep bass pulse every few seconds. You feel the machinery even when the terminal is silent. Silent matrix rain is a screensaver, audible matrix rain is a scene.
- There is a boot sequence. Before the rain, the terminal itself boots. Green text, one line at a time, blinking cursor. It sets the mood in maybe four seconds and the shader lands ten times harder because of it.
The engine: Rezmason's shader, not mine
I did not rewrite the rain itself. There is a WebGL shader by Rezmason on GitHub that has been polished for years and is used in commercial installations and museum pieces. It handles the glyph atlas correctly, runs at 60fps on a phone, and hides two killer features almost nobody switches on: a volumetric mode that renders the glyphs with real depth flying toward your eyes, and a resolution multiplier that pushes the internal render up to UHD and beyond.
It is MIT-licensed, which meant I could embed it and layer my own atmosphere on top without touching a single line of the shader. If you build something like this and try to write the rain yourself, you will regret it around hour twelve. Use Rezmason's.
What I added on top
Everything above the rain is my code:
- 21 scenes. Every film version (including the hidden Trinity grade), plus custom builds tuned from the shader's parameters: Neo Flight, Hyperdrive, Freefall, Storm, Gothic Rain, Ancient Code, Glitchfall, and a webcam MIRROR scene that renders you in living code, locally, with nothing recorded or uploaded.
- Quality selector. Standard, Native, UHD, Ultra. The top settings drive the shader's internal resolution up to twice your display's pixel density with denser glyph columns to match, and the CRT grain automatically softens so the fine detail shows through.
- CRT overlay stack. Repeating scanlines, an SVG turbulence film grain, a radial vignette, chromatic aberration on the edges, and a subtle brightness flicker. Six overlay layers, all pure CSS.
- Procedural WebAudio. Nothing is loaded from a file. A 60Hz sine oscillator provides the mains hum, a low-pass-filtered noise buffer provides the room tone, a random tick fires every 20-100ms for the character rain, and a 42Hz sub-bass pulses every eight seconds.
- Boot sequence, white rabbit, red pill. The terminal boots before the rain starts. Every 90 seconds a message fades in: WAKE UP NEO, KNOCK KNOCK, THERE IS NO SPOON. Press R (or the Konami code) and the whole scene hue-shifts red.
How to try it
The tool lives on SevinHub at sevinhub.com/matrix. No signup, no email, no cookie banner. It also opens as a windowed app inside SevinOS if you want to run it alongside the other tools.
Keyboard: M opens the scene picker, 1-9 quick-select, [ and ] cycle, Q cycles quality, +/- zoom, S toggles sound, F is fullscreen, R is red pill, H hides the HUD for capture. On mobile every control is a touch button. Headphones make it hit twice as hard. A dark room makes it three.
Take the red pill.