FX · Text

An inline slot that cycles through words, sized to the longest so the sentence never jumps.

Interfaces that feel fast, accessible, alive or yours

bash
npx shadcn@latest add https://www.rad-ui.com/r/word-cycle.json
React
import WordCycle from "@/components/fx/word-cycle"

<h2>
    Interfaces that feel{" "}
    <WordCycle words={["fast", "accessible", "alive"]} colors={["#38bdf8", "#4ade80", "#f472b6"]} />
</h2>
  • Screen readers hear every word once as a list ("fast, accessible or yours"), never a changing word.
  • Cycling pauses on hover and offscreen; pass `paused` from a visible control if it sits next to reading content (WCAG 2.2.2).
  • With `colors`, every word colour must meet contrast against the background, since each one is shown on its own.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the first word, still.
PropTypeDefaultDescription
words
string[]
—

Words to cycle through.

interval
number
2200

Milliseconds each word stays.

paused
boolean
false

Stop cycling.

colors
string[]
—

One colour per word; cycles if shorter than words.

srJoiner
(words: string[]) => string
"a, b or c"

How the words are read to screen readers.

Edit this page on GitHub →