Docs
→Random Letter Swap Hover
Random Letter Swap Hover
A text component that randomly swaps the letters vertically on hover.
Right here!Right here!Right now!Right now!Right here!Right here!Right now!Right now!
There are two types of animations available for this component:
- Forward animation — plays the animation timeline once forward.
- Ping Pong animation — plays the animation timeline in a ping pong fashion.
Source code
Install the following dependencies:
npm install lodashOnly forward animation
Ping Pong animation
Understanding the component
The component works the same as the Letter Swap Hover component, but with a random letter swapping animation (and of course, a slightly different implementation of the animation). Please refer to that documentation for more details.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | - | The text to be displayed and animated |
| reverse | boolean | true | Direction of the animation (true: bottom to top, false: top to bottom) |
| transition | DynamicAnimationOptions | { type: "spring", duration: 0.7 } | Animation configuration for each letter |
| staggerDuration | number | 0.03 | Delay between each letter's animation start |
| className | string | - | Additional CSS classes for styling |
| onClick | () => void | - | Callback function for click events |