Text Loop

Cycling text with vertical slide transitions—pass your own items and interval.

Installation

npx shadcn@latest add @iconiq/text-loop

Props

TextLoop

Cycling text treatment that advances through child items on an interval, animating each change with a vertical slide and fade.

childrenReact.ReactNode[]

Required

The items to cycle through. Pass each entry as a separate child element so you can control typography and markup per item.

classNamestring

Merged onto the root wrapper for local typography, spacing, or alignment classes.

intervalnumber

Default 1

Seconds each item stays visible before advancing to the next child.

transitionTransition

Default { duration: 0.3 }

Motion transition applied to each enter and exit animation between items.

variantsVariants

Optional Motion variants that override the default vertical slide and fade behavior.

onIndexChange(index: number) => void

Called whenever the active item changes, with the zero-based index of the newly visible child.

The component renders nothing when no children are provided.

AnimatePresence uses popLayout mode so outgoing and incoming items can overlap during the transition.

Loop and transition behavior

An internal interval increments a loop key on each tick, and the active child is resolved with modulo arithmetic so the sequence repeats indefinitely.

Default motion variants slide the incoming item up from 100% while the outgoing item exits toward -100%.

The exported useLoop hook exposes the same interval-driven key increment if you want to build a custom rotator around the same timing primitive.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.