← All components
Text / effect
Decrypted Text
A shifting cipher resolves into a clear message.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx recreates the preview. The implementation owns one animation loop and excludes paused, hidden and offscreen time.
- Reduced motion keeps the content readable. Original attribution and notice are included.
- Text is segmented into complete Unicode graphemes. Screen readers receive the original sentence throughout. Hover and click triggers also support keyboard activation.
- Click triggers a forward reveal and can be replayed. This API does not include the upstream reverse-encryption toggle or arbitrary Motion props.
React 19framer-motion@12.42.2
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text (required) | string | required | Text |
speed | number | 50 | Milliseconds per step |
maxIterations | number | 10 | Scramble iterations |
sequential | boolean | false | Reveal one character at a time |
revealDirection | start|end|center | "start" | Reveal direction |
animateOn | view|hover|click | "hover" | Trigger |
useOriginalCharsOnly | boolean | false | Use original characters |
characters | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+" | Scramble alphabet |
paused | boolean | false | Freeze animation without advancing hidden time. |
replayToken | number | 0 | Change to restart. |
className | string | '' | Additional container classes. |
encryptedClassName | string | '' | Class applied only to unresolved characters. |