Encrypted Text Reveal
Characters scramble through random glyphs then resolve to the final text on scroll.
Hello, from Mellow.
trigger = “mount”
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/encrypted-text.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/encrypted-text.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to display and animate. |
| trigger | "scroll" | "hover" | "mount" | "scroll" | What triggers the reveal animation. |
| duration | number | 1500 | Total animation duration in milliseconds. |
| stagger | number | 30 | Per-character stagger delay in milliseconds. |
| glyphs | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ..." | Pool of characters used during the scramble phase. |
| className | string | — | Additional CSS classes. |