Matrix Rain

Matrix Rain is an interactive background in the UI HUB interactive backgrounds collection. A Canvas 2D digital-rain simulation. Columns of glyphs are seeded once by a seeded RNG into a ResizeObserver-sized field and fall at per-column speeds.

The component is driven by 12 documented props (background, glyphs, fontSize, speed, density, wind and 6 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: Canvas 2D; requestAnimationFrame loop; ResizeObserver.

Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.