Characters churn through cipher glyphs and lock one at a time in a shuffled order, each with a short accent flash and a tick underneath. Every glyph sits in a cell sized to the real letter, so the line never shifts.
fingerprint 4F:2A:9C:E1 / session 14m
npx shadcn@latest add https://hyperblur.dev/r/text-cipher-lock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-cipher-lock.tsx.
import { TextCipherLock } from "@/components/hyperblur/text-cipher-lock"
<TextCipherLock text="ACCESS GRANTED" className="font-mono text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Final text. Screen readers always get this string. |
| glyphs | string | "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&*+=?" | Characters the unresolved cells cycle through. |
| duration | number | 1.6 | Seconds until the last character locks. |
| accent | string | "#7fb3ff" | Color of the lock flash and the tick. |
| trigger | "view" | "hover" | "mount" | "view" | Start when scrolled into view, on hover and focus, or right after mount. |
| loop | number | 0 | When above 0, scrambles again this many seconds after the text resolves. |
| ticks | boolean | true | Show the small underline tick when a character locks. |