127 Components
Matrix Rain
BackgroundsCanvas 2D digital rain cascade with incandescent white leading glyphs, phosphor trail decay, and real-time character mutation across Katakana, Binary, and Hexadecimal character sets.
Phosphor Terminal Streams
Matrix Rain
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/matrix-rain.json"
Props
TypeScript props supported by <MatrixRain />.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#10B981" | Primary phosphor trail color in hex format. |
| speed | number | 1.0 | Vertical stream velocity multiplier. |
| density | number | 1.0 | Multiplier controlling active column count across the viewport. |
| charset | "katakana" | "binary" | "hex" | "katakana" | Glyph character pool rendered inside falling columns. |
| fontSize | number | 15 | Monospace glyph size in pixels. |
| children | React.ReactNode | — | Optional foreground overlay content rendered above the rain canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Incandescent white lead glyph with bloom shadow and multi-step phosphor trail attenuation.
- Switchable Katakana, Binary, and Hexadecimal character pools with stochastic mid-air glyph mutation.
- DevicePixelRatio-aware ResizeObserver loop for razor-sharp monospace typography at any viewport size.
Keyboard & Accessibility
- Decorative <canvas> is marked aria-hidden='true' so screen readers bypass background glyph streams.
- Interactive HUD buttons provide explicit aria-label attributes and high-contrast focus rings.