Text Loop

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

Examples

Text Loop Basic

How can I assist you today?

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.

A Little Lost・Arthur Russell

Installation

npx shadcn add "https://motion-primitives.com/c/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.