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

PropTypeDefaultRequiredDescription
childrenstring-YesText to animate with scrambling effect
speednumber50NoInterval in ms between scramble steps
characterSetstringABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789NoCharacters used for scrambling
classNamestring-NoOptional styling classes