Text Roll
A text roll component that rotates each character, fully customizable for nice text animations.
Examples
Text Roll basic
ndekoui
Text Roll custom variants
ndekoui
Text Roll custom transition delay
ndekoui
Installation
npx ndekoui@latest add text-roll
Component API
Text Roll
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The text to roll. |
| className | string | - | The class name to apply to the component. |
| duration | number | 0.5 | The duration of the animation. |
| getEnterDelay | (i: number) => number | (i) => i * 0.1 | The delay of the animation for each character. |
| getExitDelay | (i: number) => number | (i) => i * 0.1 + 0.2 | The delay of the animation for each character. |
| transition | Transition | { ease: 'easeIn' } | The transition of the animation. |
| variants | Object | - | The variants of the animation. |
| onAnimationComplete | () => void | - | The callback function to call when the animation is complete. |