The TextScramble component decodes text one character at a time, cycling through random glyphs before each letter settles into place.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/text-scramble.jsonEverything Text Scramble accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| text (required) | string | No default | The final text to decode to |
| characters | string | '!<>-_\\/[]{}—=+*^?#' | Pool of glyphs cycled through before a letter settles |
| speed | number | 40 | Milliseconds between scramble frames |
| scrambleCount | number | 6 | Frames each character scrambles before locking in |
| scrambleOnHover | boolean | true | Re-run the effect when the pointer enters the text |
| className | string | '' | Additional CSS classes for styling |
Required.