Text Loop

Text animation that transitions between multiple items, creating an engaging looping effect

Examples

Text Loop Basic

Search projects

Text Loop with custom variants and transition

Beautiful templates for

Founders

Text Loop with onIndexChange

You can use the onIndexChange prop to trigger a callback function when the index changes. In this example, we use it to create alternating animation directions.

Morning tide・The Harbor Lane Trio

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-text-loop.json

Component API

Text Loop

Prop	Type	Default	Description
children	React.ReactNode[]		The text content to be animated.
className	string		Additional CSS classes for styling.
interval	number	2	Time interval between text changes in seconds.
transition	Transition		Animation transition settings. Can't be more than the interval.
variants	Variants		Custom animation variants.
onIndexChange	(index: number) => void		Callback function that triggers when the index changes.
trigger	boolean	true	Whether to trigger the animation.
mode	AnimatePresenceProps['mode']	popLayout	Mode of for the AnimatePresence component.