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
Prop | Type | Default | Description |
---|---|---|---|
text* | string | - | The text to be displayed and scrambled |
scrambleSpeed | number | 50 | Speed of the scrambling animation in milliseconds |
scrambledLetterCount | number | 8 | Number of letters to scramble |
autoStart | boolean | true | Whether to start the animation automatically |
className | string | undefined | Additional CSS classes for styling |
characters | string |
| Characters to use for scrambling |
scrambledClassName | string | undefined | Additional CSS classes for styling the scrambled text |
autoStart | boolean | true | Whether to start the animation automatically |
onComplete | () => void | - | Callback function for when the animation completes |
onStart | () => void | - | Callback function for when the animation starts |