Word Rotate

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add word-rotate

Usage$

WordRotate is a "use client" component. Place it inline inside headings or body copy to cycle through a list of words with a slide-up/slide-down transition. Each word is shown for duration milliseconds before animating to the next.

Basic$

1"use client"
2import { WordRotate } from "@glinui/ui"
3
4export function WordRotateDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <h2 className="text-3xl font-bold">
8      Build with{" "}
9      <WordRotate
10        words={["React", "Next.js", "Tailwind", "Glin UI"]}
11        className="text-accent"
12      />
13    </h2>
14  </div>
15)
16}

Examples$

Fast Rotation$

Lower duration for a rapid, high-energy cycling effect.

"use client"
import { WordRotate } from "@glinui/ui"
export function WordRotateFastDemo() {

1"use client"
2import { WordRotate } from "@glinui/ui"
3
4export function WordRotateFastDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <h2 className="text-3xl font-bold">
8      Powered by{" "}
9      <WordRotate
10        words={["speed", "precision", "glass", "motion"]}
11        duration={1500}
12        className="text-accent"
13      />
14    </h2>
15  </div>
16)
17}

Accessibility$

• The component renders with aria-live="polite" so screen readers announce each new word as it appears.
• The outgoing word is removed from the DOM after its exit animation, preventing duplicate announcements.
• Surrounding static text is not affected by the live region and is read normally.

Reduced Motion$

When prefers-reduced-motion: reduce is active, word cycling stops and the first word in the words array is displayed statically without any animation.

API Reference$

Source$

1import { WordRotate } from "@glinui/ui"