Text Roll

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

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

Examples

npx shadcn@latest add "https://components.dylanwlim.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.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.