Glyph Matrix
A high-performance, canvas-driven Matrix digital rain background effect featuring streaming Katakana and numeric glyphs, glowing head highlights, decaying phosphor trails, and interactive cursor disturbances.
Wake up, Neo...
Interactive Canvas • Move cursor to scatter glyphs
Color:
Speed:
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/glyph-matrix
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| fontSize | number | 16 | Font size in pixels for the glyph grid |
| color | string | '#00FF66' | Primary rain stream color |
| headColor | string | '#FFFFFF' | Color of the leading head glyph in each column |
| backgroundColor | string | '#050505' | Background color used for trail fading |
| speed | number | 1 | Fall speed multiplier |
| fadeRate | number | 0.06 | Decay rate per frame for phosphor trails |
| interactive | boolean | true | Whether mouse proximity disturbs and accelerates glyph streams |
| paused | boolean | false | Pauses stream animation |
| fullPage | boolean | false | Fixes canvas to fill the entire viewport as a full-page background |
| opacity | number | 1 | Overall opacity of the matrix backdrop |
| children | React.ReactNode | — | Optional content layered over the matrix background |