Interactive rolling text effect on hover, mount and scroll.
Unlock component
One license unlocks every pro feature for life, including the ones we haven't built yet.
Already have an account? Sign in
| Name | Type | Default | Description |
|---|---|---|---|
children | string | — | The text content to animate. |
axis | "x" | "y" | "y" | Axis along which letters roll. |
mode | "letters" | "group" | "letters" | Animate each letter independently on hover, or the entire group at once. |
direction | "forward" | "backward" | "random" | "forward" | Roll direction. |
playOnScroll | boolean | true | Trigger the animation when the element enters the viewport. |
playOnMount | boolean | true | Trigger the animation on mount. |
playOnHover | boolean | true | Trigger the animation on hover. |
stagger | number | 0.01 | Delay in seconds between each letter's animation start. |
duration | number | 0.8 | Duration of each letter's roll animation in seconds. |
cycles | number | 1 | Number of times the letter rolls before settling. |
render | ReactElement | function | <span/> | Override the wrapper element. |
Motion
React animation library.
Text Split (Atelier)
A utility that splits text for animation.