Text Loop

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

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

Text Effect Text Morph

On This Page

Text Loop Examples Text Loop Basic Text Loop with custom variants and transition Text Loop with onIndexChange Installation Component API Text Loop

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.