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

Examples

Word cycle

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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component WordRotateDefault layout:inline style:word-rotate {
  label "Design"
  text "Design"
  text "System"
}

page "/audit/word-rotate/default" type:custom {
  use WordRotateDefault
}

API Reference

Generated from the component's exported types.

WordRotateProps

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

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the underlying DOM node.
`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.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.