Word rotator

Cycles words while the width follows.

Built for designers, engineers, writers, everyone

Installation

$ npx shadcn@latest add @textlab/word-rotator

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { WordRotator } from "@/components/textlab/word-rotator/word-rotator";

<h1>Built for <WordRotator words={["designers", "engineers", "writers"]} /></h1>

Variants

slideblurflip

Props

Prop	Type	Default	Description
words*	string[]	–	Words to cycle.
variant	"slide" \| "blur" \| "flip"	"slide"	How each word arrives.
interval	number	2.4	Seconds each word stays.
pauseOnHover	boolean	true	Pause while hovered or focused.
label	string	–	What screen readers hear. Defaults to every word.
as	ElementType	"span"	Rendered element.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Hero lines with a rotating noun.
Short lists where each item fits the same sentence.

Skip it

Words that differ wildly in length on mobile; the sentence reflows each time.
Essential information hidden in later words.

Accessibility

Screen readers hear all words once instead of a moving target.
Hover and focus pause the rotation.

Motion

The container's width animates on the same spring as the words, so neighbours glide.
Old words leave as new ones arrive, overlapping instead of waiting.

Reduced motion. Shows the first word, still.

Performance

One interval; layout animation on a single wrapper.