Matrix Hero
Full-width hero section with cascading matrix rain and centered green-phosphor glow text.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/matrix-hero.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/matrix-hero.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Welcome to the Matrix, Neo." | Hero headline displayed centered over the rain. Ignored when children is provided. |
| speed | number | 1 | Rain fall speed multiplier. |
| paused | boolean | false | Freeze the rain animation. |
| charset | string | — | Characters used in the rain columns. Defaults to half-width katakana + digits. |
| glowIntensity | number | 1 | Multiplier for the text glow radius. 0 disables glow. |
| className | string | — | Additional CSS classes for the outer wrapper. |
| children | React.ReactNode | — | Custom content rendered centered over the rain, replacing the default text. |