← All effects

Matrix Rain

BackgroundVanilla JS · zero dependenciesCanvas · one draw call per column
-- fps
prefers-reduced-motion detected — animation paused, static frame shown

X-ray · layers

the falling glyphs
the lead glyph glows white
old glyphs dim instead of vanishing

Parameters

Fall speed1.0×
Glyph size16 px
Trail length14
Density85%
your version · updates as you tinker

How this effect works

The rain is not made of falling letters. It is a grid of columns, and each column remembers one number: how far down its head has travelled. Every frame the head moves down and a random glyph is stamped at its position. That is the whole simulation — one number per column.

The trail is where the illusion lives. Instead of clearing the canvas to black each frame, we paint it with slightly transparent black. Whatever was drawn before survives a little dimmer, so the glyphs left behind fade out on their own. Turn the trail layer off above and the rain becomes a bare row of glyphs — proof that the tail is drawn by the fading, not by memory. The heads layer stamps the newest glyph in near-white, which is what makes each column read as a direction rather than a blur.

Production notes: respects prefers-reduced-motion (renders one static frame) · cost scales with column count, so glyph size is the real performance dial — bigger glyphs mean fewer columns · density thins columns without changing their spacing · the copied snippet is self-contained HTML + JS.