Premium & Brand

Word Rotate

Cycles through a list of words with a vertical swap.

Import

tsx

import { WordRotate } from "@cronus-ui/ui";

bash

npx cronus-ui add word-rotate

Cycles through a list of words with a vertical swap. A polite live region announces the current word.

Ship faster.

tsx

<p className="font-display text-3xl text-fg">
  Ship <WordRotate words={["faster", "calmer", "on-brand"]} />.
</p>

Generated from the component's exported types.

Extends Omit<HTMLAttributes<HTMLSpanElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	—
`words`*	`string[]`	—	Phrases to cycle through.
`interval`	`number`	`2200`	Milliseconds each word stays on screen.
`reducedMotion`	`"user" \| "always" \| "never"`	`"user"`	How `prefers-reduced-motion` is honoured. Defaults to `"user"` (cross-fade becomes a cut). `"never"` always animates; `"always"` always cuts.
`lockWidth`	`boolean`	`true`	When true (default), the box stays as wide as the longest word so the line does not reflow. Set false when an underline or similar chrome should track the visible word.
`announce`	`boolean`	`true`	When false, skip the polite live region — use inside a heading so assistive tech is not re-announced every interval.