Text Loop

Installation

Usage

import { TextLoop } from '@/components/sora-ui/texts/text-loop';

export function RotatingHeadline() {
  return (
    <TextLoop className="text-2xl font-medium">
      <span>Design fast.</span>
      <span>Ship faster.</span>
      <span>Iterate forever.</span>
    </TextLoop>
  );
}

Pause cycling and drive the index manually:

'use client';

import { useState } from 'react';
import { TextLoop } from '@/components/sora-ui/texts/text-loop';

export function ManualTextLoop() {
  const [paused, setPaused] = useState(false);

  return (
    <button onClick={() => setPaused((current) => !current)} type="button">
      <TextLoop trigger={!paused}>
        <span>Hover to pause</span>
        <span>Click to resume</span>
      </TextLoop>
    </button>
  );
}

Props

When to Use

Use TextLoop for short rotating copy where a hard cut would feel abrupt: hero headlines, rotating value props, or status text that changes over time. Keep items short and similar in width, since the container does not reserve space for the widest item.

Accessibility

Set live="polite" if the cycling text conveys information users should be notified of; leave it "off" (default) for purely decorative rotating copy, since a live region firing every interval seconds is disruptive for screen reader users. When prefers-reduced-motion: reduce is set, the component still swaps the active item on each interval but skips the enter/exit motion via useReducedMotion() — no extra configuration needed.

Credits

Inspired by motion-primitives.