Scramble Text

Text that decrypts character by character with randomized intermediate characters.

Scrambles on mount (click to replay):

Scrambles on hover:

Hover over this text to decode it

Non-sequential (all at once):

Installation

npx shadcn@latest add https://wise-ui.com/r/scramble-text.json

Prop	Type	Default	Description
text	string	-	The target text to reveal.
trigger	"mount" \| "hover"	"mount"	When to start the scramble animation.
speed	number	50	Milliseconds per character resolve step.
characterSet	string	A-Z, a-z, 0-9, symbols	Characters used for the random scramble effect.
sequential	boolean	true	Resolve characters left-to-right (true) or all at once (false).
className	string	-	Additional classes for the text element.