Text Scramble
Animates text by cycling through random characters, progressively revealing the original text to create a dynamic scramble effect.
Examples
Text Scramble Basic
Simple usage with default character set and speed.
Its over 9000!
Custom CharacterSet
Using custom charset with slower animation speed.
Go beyond! Plus Ultra!
Installation
npx shadcn@latest add "https://ui.rechesoares.com/registry/text-scramble.json"
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | string | - | Yes | Text to animate with scrambling effect |
| speed | number | 50 | No | Interval in ms between scramble steps |
| characterSet | string | ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 | No | Characters used for scrambling |
| className | string | - | No | Optional styling classes |