Text Scramble
Text that scrambles through random glyphs before resolving, replaying on hover, focus or trigger change.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
TextScrambleProps
Also accepts all props of Omit<React.ComponentProps<"span">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| text* required | string | — | The final text |
| duration | number | 900 | Total scramble time in ms |
| chars | string | DEFAULT_CHARS | Glyphs used while scrambling |
| trigger | unknown | — | Change this value to replay the effect |
| scrambleOnHover | boolean | true | Replay on hover and keyboard focus |
Install
$ npx shadcn@latest add https://chromotion.dev/r/text-scramble.json