Matrix Rain Generator

The generated effect is roughly forty lines of canvas code with no dependencies, which makes it practical as a real website background rather than just a demo. A few things matter if you ship it.

Layering

Put the canvas in a fixed-position container behind your content and take it out of the accessibility tree:

<canvas id="matrix" aria-hidden="true"></canvas>

#matrix { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

pointer-events: none matters — without it the canvas will swallow clicks meant for your page.

Respect reduced motion

Full-screen continuous motion is a real accessibility problem for people with vestibular disorders. Check the preference and do not start the loop if the visitor has asked for less motion:

if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;

Stop work when nobody is looking

Browsers throttle requestAnimationFrame in background tabs, but the loop still costs something and can keep a laptop awake. Pause explicitly:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) cancelAnimationFrame(handle);
  else handle = requestAnimationFrame(frame);
});

Performance

The whole canvas is repainted every frame — one translucent rectangle plus two fillText calls per column. At a 16px glyph size on a 1920px display that is around 120 columns, or 240 text draws a frame, which is comfortable. Cost scales with the number of columns, so a smaller glyph size is more expensive, not less. Cap the device pixel ratio at 2: a 3x buffer costs nine times the fill rate of 1x for no visible gain on glyphs this size.

Most reimplementations of this effect look subtly wrong, and it is almost always one of these four things.

1. Clearing the canvas

Using clearRect gives you a single row of jittering glyphs with no tail. The effect depends on never clearing: a translucent rectangle is painted over the whole canvas each frame, so previous glyphs decay instead of vanishing. The fade alpha is the trail length.

2. Columns marching in step

If every column advances at the same rate, the eye reads a descending grid rather than rain. Two independent sources of desynchronisation fix it: a per-column speed multiplier, and a reset that only fires with a small random probability once a column passes the bottom. The second is what keeps columns permanently out of phase rather than merely starting out that way.

3. A uniform-brightness head

In the film the leading character is near-white and the tail is saturated green. Drawing every glyph the same colour loses the sense of a droplet with a direction of travel. Here the head is drawn at high lightness and a second, dimmer glyph is drawn just behind it.

4. Static glyphs

Each cell should re-randomise its character as it falls, rather than carrying one letter down the screen. The original effect flickers because the glyph at a given position keeps changing while the column advances through it.

About the characters

The film used mirrored half-width katakana mixed with Latin digits and a handful of symbols — the designer reportedly scanned them from a Japanese cookbook. Because the glyphs are mirrored, no real font reproduces the originals exactly; katakana plus digits is the closest you get without a custom typeface.