OneTaskBy Tim King · Updated
Matrix Rain
Falling Green Code, Fullscreen in Your Browser
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Matrix Rain works
This matrix rain screensaver fills the screen with falling glyphs. Press Play and columns of glyphs rain down a black screen, each with a bright leading character and a fading green trail. Speed it up, make the characters bigger for a display across the room, lengthen the trails, or change the colour. Fullscreen makes it the screensaver people are usually looking for.
Matrix rain: what it does and why
The digital rain from The Matrix is the most copied screen effect of the last thirty years, and the reason it works is simple: it is a set of vertical streams of characters, each falling at its own pace, with the newest character bright white and the older ones fading into the background. The characters themselves are half-width Japanese katakana mixed with digits and a few symbols, mirrored in the film, which is why the effect looks like text but cannot be read.
How it is drawn. The canvas is divided into columns one character wide. Each column has a drop that moves downward at its own speed. Every frame, the whole canvas is covered with a translucent black rectangle, which is what makes everything already drawn fade a step; then each drop that has moved to a new row draws a random glyph in the stream colour at its old position and a white glyph at its new one. The trail is nothing more than the history of past frames, dimmed by successive layers of translucent black.
The sliders. Speed multiplies the fall rate of every drop; drops also have their own random rate so the columns never move in step. Character size sets the glyph size and therefore the number of columns — 10 px on a fullscreen display is a wall of fine text, 40 px is readable from the back of a room. Trail length sets the opacity of the fading rectangle, so a long trail leaves each stream visible for many rows and a short one gives sparse, fast comets. Colour changes the stream colour while the lead character stays white.
Restart and resize. Changing the character size rebuilds the columns, as does resizing the window or going fullscreen. Drops that run off the bottom wait a random moment before starting again at the top, which keeps the density uneven in the way the original is.
Uses. People run it fullscreen on a spare monitor, as a backdrop for a video call, or behind a title on a projector. Save PNG captures a frame at the canvas resolution if you want a still for a slide.
FAQ
Are the characters the real ones from the film?
The film's glyphs were hand-drawn from half-width katakana, Latin digits and some invented symbols, then mirrored. This tool uses half-width katakana from the system's fonts plus digits and punctuation, unmirrored, which is as close as you can get with ordinary text rendering and reads correctly at a glance.
Why do some columns look brighter than others?
Because each column draws a new character only when its drop moves to a new row, and slow drops draw less often. A column with a fast drop is redrawn constantly and stays bright; a slow one fades between characters. This variation is what stops the effect looking like a uniform grid.
Can I use my own text instead of random characters?
Not in this version. Random glyphs are what people are searching for. A version that rains a chosen message is a different tool and would need to handle word boundaries and repeats.
Does it work as an actual screensaver?
It runs in the browser tab, so it appears when the tab is visible and fullscreen. It will not start automatically when the computer is idle, since web pages cannot do that; put the tab fullscreen on the display you want and leave it.
See also: all Simulations & Screensavers tools, Images, Audio, Video & Screen, PDF, SVG, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Bouncing DVD Logo
The bouncing logo screensaver with a corner-hit counter; fullscreen.
Plasma Effect
Swirling demoscene colour with speed, scale and palette; fullscreen.
Fireworks
Rockets, bursts and fading sparks; click to launch; fullscreen.
Lava Lamp
Blobs that rise, merge and split; four colours, fullscreen.
Music Visualiser
Bars, waveform or circle driven by your microphone; fullscreen.