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 | 2000 | Time interval between text changes in milliseconds. |
| transition | Transition | Animation transition settings. Can't be more than inerval | |
| 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. |