Atmosphere & Background · The air of the page
Matrix rain代码雨
- pouring down
- in columns
- fading as it falls
Columns of glyphs fall from top to bottom, each at its own speed, dimming as they descend and restarting from the top when they run out. The individual glyphs never move — what advances is the column, which is why it reads as data flowing rather than letters flying.
When to use it
Use it as an ambient backdrop for tech, security or AI themes, at under 0.2 opacity and behind the content. Never behind body text, and always give it a reduced-motion fallback of a static gradient — a screen full of moving glyphs is a real obstacle to reading.
Parameters
columns 26 · fall 42–120px/s · per-column delay 0–1.6s · trail 18 chars · opacity 0.18 · linear, loops forever
Recipe
Matrix rain → columns 26 · fall 42–120px/s · per-column delay 0–1.6s · trail 18 chars · opacity 0.18 · linear, loops forever
One sentence for your AI
Build a matrix-rain backdrop: cut the width into 26 columns, each with its own fall speed and start delay. Within a column draw 18 glyphs from top to bottom with opacity falling as they descend, and restart the column from the top once it leaves the frame. Advance per frame with no easing, keep overall opacity at 0.18, and paint it behind the content.