Docs
→Scramble In
Scramble In
A text component that reveals the text with a scrambled part in front.
Source code
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 | "ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz !@#$%^&*()_+" | 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 |