Browse components
Decrypted Text
Scrambled glyphs resolve into the real text, on view or on hover.
Access granted
Installation
npx shadcn@latest add @glint-ui/decrypted-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/decrypted-text.json
Usage
import { DecryptedText } from "@/components/ui/decrypted-text";
<DecryptedText text="Access granted" revealDirection="random" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Access granted" | Final text. |
| speed | number | 40 | Ms between reveal steps. |
| characters | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*" | Glyphs used while scrambling. |
| revealDirection | "start" | "end" | "random" | "start" | Order characters resolve in. |
| trigger | "view" | "hover" | "view" | Start on scroll into view or on every hover. |
| className | string | — | Extra classes for the root element. |