How the Digital Rain Effect Works
Falling green characters on a black screen became a symbol of hacking, computers and simulated worlds after the 1999 film The Matrix. Here is where the look came from and how a web page can recreate it.
Where the look comes from
The effect was designed by Simon Whiteley, a production designer who worked on the film's title sequence. The glyphs are mirrored Japanese katakana characters mixed with Western numerals. Whiteley has said the characters came from sushi recipes. This site is an independent tribute and has no connection to the filmmakers.
How a browser draws it
The generator uses an HTML canvas, a blank surface a script can draw on many times per second. The idea is simple:
- Columns. The screen is split into columns as wide as one character. Each column has its own falling point and its own speed, which is why the rain looks uneven and natural.
- Characters. Every frame, each column draws a character at its falling point. The bright white-green head is the newest character.
- Trails. Instead of erasing the screen, each frame is covered with a nearly transparent black layer. Old characters fade a little more each frame, which leaves the trail. A weaker layer gives longer trails.
- Glitches. A small chance of swapping the character in each column makes the code appear to flicker and change.
- Restart. When a column falls off the bottom, it waits a random moment and starts again from the top.
Make your own
- Type a name, a word or a string of 1s and 0s in the text box. Tick "Only my text" to rain nothing but your characters.
- Pick a color, then adjust the fall speed, text size, trail length and glitch rate.
- Press the fullscreen button, or the F key, and record your screen for a wallpaper or video background.
- Use "Copy share link" to send friends the exact rain you made.