ComponentsTyping
Matrix decode
Glyph rain resolves into the word.
Installation
$ npx shadcn@latest add @textlab/matrix-decodeNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { MatrixDecode } from "@/components/textlab/matrix-decode/matrix-decode";
<MatrixDecode as="h2" text="Wake up" />Variants
rainflickerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "rain" | "flicker" | "rain" | rain drops a column of glyphs onto each letter; flicker cycles glyphs in place. |
| glow | string | phosphor green | Color letters flash as they lock in. |
| charset | string | half-width katakana and digits | Glyphs used in the rain. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| duration | number | 1.6 | Seconds each part takes. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Developer tools, terminals and security products.
- Short titles on dark backgrounds.
Skip it
- Light, calm brands; the glow reads loud.
- Paragraphs.
Accessibility and motion
Accessibility
- The rain is decorative and aria-hidden; the title is read once.
- Glyph positions are seeded, so server and client render the same frame.
Motion
- Each letter catches its column just as it lands, then cools from the glow color over 0.9 s.
- Order is loosely left to right, with seeded randomness.
Reduced motion. The title appears in place with no rain or glow.
Performance
- One short motion per letter; nothing runs after it resolves.