DecryptedText
decrypted-textScrambles and progressively resolves characters into the supplied text.
Usage
Basic usage
After scrolling into the viewport, the characters are garbled and rolled, and are decoded to plain text bit by bit.
<DecryptedText
text="Decrypting access..."
className="text-2xl font-semibold text-foreground"
/>Hover decoding
animateOn="hover" decodes when hovering and resets to garbled characters when moved out.
<DecryptedText
text="Hover to decrypt"
animateOn="hover"
className="text-2xl font-semibold text-primary"
/>Decoding speed
speed is the millisecond interval between each garbled code refresh. The smaller the value, the faster the scrolling.
<DecryptedText
text="Fast scramble"
speed={25}
className="text-2xl font-semibold text-foreground"
/>Custom character set
characters specifies the garbled sampling character set, for example, only 0/1 is used for the binary stream look and feel.
<DecryptedText
text="BINARY MODE"
characters="01"
className="text-2xl font-semibold text-primary"
/>When to use
Use DecryptedText for a technical or security-themed reveal that scrambles characters before resolving them. Use BlurText for a soft focus transition, GlitchText for RGB tearing, or SplitText for a straightforward staggered entrance.
Import
import { DecryptedText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text * | string | — | target plaintext |
| speed | number | 55 | The interval between each garbled refresh is milliseconds |
| animateOn | "view" | "hover" | "view" | Trigger method: view scrolls into the viewport and decodes it once/hover decodes it and resets it when it moves out. |
| characters | string | Uppercase and lowercase letters + numbers + symbols | Garbled sampling character set |
The remaining <span> native properties support.
Usage guidelines
- Random scrambling starts in a client effect to avoid SSR/hydration mismatches; the server-rendered first frame is readable text.
- The component uses
tabular-numsto limit width jitter. Do not override that width behavior throughclassName, or characters may jump as they change.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<DecryptedText text="Decrypting the secret" animateOn="view" speed={55} />