ReactBits

DecryptedText

Typewriter-style decrypt animation with scrambled character transitions, sequential or random reveal, and multiple trigger modes. Powered by Motion.

Hover to decrypt (default)

animateOn="hover"speed=50maxIterations=10

sequential=truerevealDirection="start"speed=80

sequential=truerevealDirection="center"encryptedClassName="text-emerald-500/60"

speed=20maxIterations=20encryptedClassName="text-red-500/50"

characters="0123456789"speed=40

useOriginalCharsOnly=trueencryptedClassName="text-amber-400/60"

animateOn="view"sequential=true

animateOn="click"clickMode="toggle"revealDirection="end"

Prop	Type	Default	Description
text	string	required	Text to decrypt/display
speed	number	50	Interval in ms between character shuffles (lower = faster)
maxIterations	number	10	Number of scramble cycles before revealing final text
sequential	boolean	false	Reveal characters one-by-one in order instead of all at once
revealDirection	"start" \| "end" \| "center"	"start"	Direction for sequential reveal
characters	string	A-Z a-z !@#$%^&*()	Character pool for scrambled state
useOriginalCharsOnly	boolean	false	Only use characters from the original text for scrambling
animateOn	"view" \| "hover" \| "inViewHover" \| "click"	"hover"	Trigger mode for the decrypt animation
clickMode	"once" \| "toggle"	"once"	Click behavior: decrypt once or toggle encrypt/decrypt
className	string	""	Class applied to each revealed character
encryptedClassName	string	""	Class applied to each scrambled/encrypted character
parentClassName	string	""	Class applied to the outer wrapper span