SaaSwhole
Word Rotator
A single slot cycles through words with a soft vertical swap.
Installation
Run the following command:
pnpmdlx shadcn@latest add https://mutype.dev/r/word-rotator.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| spec | AnimationSpec | — | Animation spec object (imported from components/mutype/specs/<id>). |
| text | string | — | The text to animate. |
| as | "span" | "div" | "h1"–"h4" | "p" | "span" | The HTML element to render. |
| triggerKey | string | number | — | Re-runs the animation when the value changes. |
| duration_multiplier | number | 1 | Scales duration_ms and stagger_ms uniformly. >1 slower, <1 faster. |
| y_travel_multiplier | number | 1 | Multiplier on y_px values; useful to dampen lift on small text. |
| forceReducedMotion | boolean | false | Forces the reduced-motion fallback even when the user has not opted in (testing). |
| onFinished | () => void | — | Fires once when the enter phase completes (not on cancel). |
| className | string | — | Tailwind / CSS class names. Forwarded to the host element. |
Usage notes
Apply only to the rotating word, not the whole sentence — wrap it in a fixed-width container or set width to the longest word in JS to prevent layout shift. Pause cycling on hover and when the tab is hidden (visibilitychange) to avoid distraction and CPU waste. 2200–3200ms per word is the readable range; below 1500ms most readers can't finish a single word. For longer phrases use shared-axis-y; for editorial impact use kinetic-center-build.
Inspired by Hero copy on Linear, Vercel, Stripe — a rotating value-prop word inside a fixed sentence..