Text that scrambles through random glyphs and settles left to right, like a decrypting terminal.
npx shadcn@latest add https://hyperblur.dev/r/decode-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/decode-text.tsx.
import { DecodeText } from "@/components/hyperblur/decode-text"
<DecodeText text="HYPERBLUR" trigger="hover" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to reveal. |
| duration | number | 1.2 | Seconds the first character scrambles before it settles. |
| glyphs | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&@" | Characters the scramble cycles through. |
| trigger | "mount" | "hover" | "mount" | Play once on mount, or replay on hover. |
| stagger | number | 0.04 | Seconds between one character settling and the next. |