Text Roll
A text roll component that rotates each character, fully customizable for nice text animations.
Examples
Text Roll basic
components
Text Roll custom variants
components
Text Roll custom transition delay
components
Installation
npx shadcn@latest add "https://components.dylanwlim.com/c/text-roll.json"
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. |