Sora UI

Text Cursor Loop

Cycles through a list of words with a per-character collapse/reveal transition and a trailing cursor glyph that wipes across the text between words. React.

Made by Axyl

The anime.js hero line — words collapse/reveal one character at a time while the cursor wipes across the text.

Loading...

Installation

File Structure

text-cursor-loop.tsx

Usage

import { TextCursorLoop } from "@/components/sora-ui/texts/text-cursor-loop";

export default function Page() {
  return (
    <p>
      A fast and flexible JavaScript library to animate{" "}
      <TextCursorLoop words={["the web", "HTML", "WebGL", "CSS", "SVG"]} />
    </p>
  );
}

Unlike TextLoop (which swaps whole blocks) or TextScramble (random-character reveal), TextCursorLoop collapses each character out from the end of the word, swaps in the next word, then reveals it character-by-character from the start — with a trailing cursor glyph that stretches and slides between the two states.

Styling

No default colors

Like every primitive in this registry, TextCursorLoop ships structural classes only. The root and the cursor both carry a data-phase="idle" | "collapsing" | "revealing" attribute — hook it with data-[phase=collapsing]:text-red-500-style classes (see this page's own preview) to recolor the cursor during the transition.

Props

PropTypeDefault
words?
string[]
-
as?
ElementType
"span"
cursor?
ReactNode
"."
holdDuration?
number
1750
charDelay?
number
25
loop?
boolean
true
trigger?
boolean
true
onIndexChange?
(index: number) => void
-
className?
string
-
classNames?
TextCursorLoopClassNames
-

When to Use

A hero subheading where one word in a sentence should keep changing — "animate ___", "build for ___", "designed for ___". Best with short, similar-length words; very long or mixed-width words make the collapse/reveal stagger less readable.

Accessibility

Character spans are aria-hidden="true"; the root element carries aria-label={currentWord} so screen readers announce the plain word, not per-character noise. Under prefers-reduced-motion: reduce, cycling never starts — the first word renders statically.

Built by Axyl. A motion-first component registry for React.

Last updated: 7/26/2026