Text Loop

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

Installation

npx shadcn@latest add @iconiq/text-loop

File Structure

Usage

"use client";

import { TextLoop } from "@/components/ui/text-loop";

export function RotatingHeadline() {
  return (
    <p className="max-w-4xl font-light text-lg text-foreground tracking-tight sm:text-xl">
      <TextLoop interval={1}>
        <span>Design</span>
        <span>Build</span>
        <span>Ship</span>
        <span>Iterate</span>
      </TextLoop>{" "}
      software that ships faster.
    </p>
  );
}

Props

Props
Description

TextLoop

children

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

Type React.ReactNode[]

className

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

Type string

interval

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

Type number·Default 1

transition

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

Type Transition·Default { duration: 0.3 }

variants

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

Type Variants

onIndexChange

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

Type (index: number) => void

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Design software that ships faster.