Word Rotate

Installation$

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.

Examples$

Fast Rotation$

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

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

"use client"
import { WordRotate } from "@glinui/ui"


export function WordRotateFastDemo() {
return (
  <div className="flex items-center justify-center p-8">
    <h2 className="text-3xl font-bold">
      Powered by{" "}
      <WordRotate
        words={["speed", "precision", "glass", "motion"]}
        duration={1500}
        className="text-accent"
      />
    </h2>
  </div>
)
}

Engines$

Word Rotate drives its main animation through the pluggable motion engine. Pass engine="css" | "motion" | "gsap", wrap a subtree in MotionEngineProvider, or set data-glin-engine on <html>. The css engine is built in and dependency free; motion and gsap are opt-in through @glinui/motion/register/*. Motion level none renders the final state and subtle is opacity only.

Engine comparison$

// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"

// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"
<WordRotate engine="css" words={["fast", "calm", "yours"]} duration={1800} />


<WordRotate engine="motion" words={["fast", "calm", "yours"]} duration={1800} />


<WordRotate engine="gsap" words={["fast", "calm", "yours"]} duration={1800} />

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$

import { WordRotate } from "@glinui/ui"