Motion Effects
Encrypted Text
Characters shuffle through gibberish before locking into the final string — a futuristic reveal effect for hero headings, buttons, and beyond.
Trigger: load · Loop: true
Hover to reveal
Click to replay
Viewport trigger
Use cases
In context
Playground
Adjust speed, shuffle, and iterations. Click replay to re-run.
50ms
35ms
8
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The final revealed string |
| trigger | "load" | "hover" | "viewport" | "click" | "load" | What starts the animation |
| speed | number | 50 | ms between each character lock-in |
| shuffleSpeed | number | 35 | ms between gibberish shuffle ticks |
| iterations | number | 8 | Shuffle cycles before first character locks |
| revealDelay | number | 0 | ms before animation begins |
| characters | string | alphanum+symbols | Charset used for gibberish |
| loop | boolean | false | Replay after completion |
| loopDelay | number | 2000 | ms between loops |
| as | span | p | h1 | h2 | h3 | div | "span" | Rendered HTML element |
| onComplete | () => void | — | Callback when reveal finishes |
| className | string | — | Additional Tailwind classes |