Docs
Scramble In

Scramble In

A text component that reveals the text with a scrambled part in front.

1. One More Time (featuring Romanthony) - 5:202. Aerodynamic - 3:273. Digital Love - 4:584. Harder, Better, Faster, Stronger - 3:455. Crescendolls - 3:316. Nightvision - 1:447. Superheroes - 3:578. High Life - 3:229. Something About Us - 3:5110. Voyager - 3:4711. Veridis Quo - 5:4412. Short Circuit - 3:2613. Face to Face (featuring Todd Edwards) - 3:5814. Too Long (featuring Romanthony) - 10:00

Installation


npx shadcn@latest add "https://fancycomponents.dev/r/scramble-in.json"

Usage


With the autoStart prop, you can start the animation automatically. But there is also a start and reset method exposed via a ref if you need to control the animation from outside of the component, as you see in the demo above.

Props


PropTypeDefaultDescription

text*

string-The text to be displayed and scrambled
scrambleSpeednumber50Speed of the scrambling animation in milliseconds
scrambledLetterCountnumber8Number of letters to scramble
autoStartbooleantrueWhether to start the animation automatically
classNamestringundefinedAdditional CSS classes for styling
charactersstring

"ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz !@#$%^&*()_+"

Characters to use for scrambling
scrambledClassNamestringundefined

Additional CSS classes for styling the scrambled text

autoStartbooleantrueWhether to start the animation automatically
onComplete() => void-Callback function for when the animation completes
onStart() => void-Callback function for when the animation starts