Decrypt Text
Scrambled characters flicker rapidly and lock into the real text one by one — a hacker-style decryption effect.
On entering the viewport, each character first flickers rapidly through scrambled glyphs, then locks into the real text from left to right, with a blinking cursor at the locking edge — recreating the decryption scene from classic hacker movies. It supports three triggers (entering the viewport, on mount, and on hover), a custom character set, and replay at any time.
Loading preview…
npx shadcn@latest add https://webberui.com/r/decrypt-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
50
35
<DecryptText />
Installation
npx shadcn@latest add https://webberui.com/r/decrypt-text.jsonOr, once registries are configured in components.json, install it as @webberui/decrypt-text.
Usage
import { DecryptText } from "@/components/ui/decrypt-text";
<DecryptText text="ACCESS GRANTED — verification passed" />
// Hover trigger plus a custom scramble character set
// (for CJK text, full-width characters avoid width jitter)
<DecryptText
text="機密檔案已解鎖"
trigger="hover"
characters="機密檔案已解鎖加密金鑰核心資料"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The complete text to decrypt and display |
trigger | "inView" | "load" | "hover" | "inView" | When it is triggered: entering the viewport, immediately on mount, or hover/focus |
lockSpeed | number | 50 | Interval at which each character locks in (milliseconds); smaller decrypts faster |
scrambleSpeed | number | 35 | Update interval of the scramble flicker (milliseconds) |
characters | string | alphanumerics + symbols | The scramble character set |
once | boolean | true | Whether it plays only once with trigger="inView" |
playKey | number | string | — | Changing this value replays the animation |
onComplete | () => void | — | callback fired once every character has locked in |
scrambleClassName | string | — | Custom styles for the unlocked scrambled section, overriding the default green |
className | string | — | forwarded to the outermost container and merged with the default font-mono |
Accessibility
- When the user has "reduce motion" enabled at the system level, the complete text is shown directly and the scramble animation never plays
- The complete text is exposed
sr-onlyfor the screen reader, and the flickering scramble and cursor are hidden from assistive technology (aria-hidden), so nothing is announced character by character - With
trigger="hover"the element is keyboard focusable (tabIndex=0), sofocustriggers the decryption just as mouse hover does - The scramble is generated by an index-seeded pseudo-random function, so SSR and hydration produce identical output with no content jump or warning