Text Roll

A text roll component that rotates each character, fully customizable for nice text animations.

Examples

npx shadcn add "https://motion-primitives.com/c/text-roll.json"

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.