Word Shifter — Rotating words with adaptive highlight

Create a sentence like “Build bold text components.” and let the middle word rotate through your own list.

You control three parts:

• textBefore

• words

• textAfter

The component handles the animation and keeps the layout steady while the word changes.

Highlight styles

Choose how the rotating word is presented:

• Pill – Rounded background behind the word

• Solid – Changes the word color

• None – Pure rotation, no extra styling

The pill background can resize automatically to match each word, or stay fixed if you prefer a locked width.

Animation controls

• Auto-rotates every 2.5 seconds

• Smooth slide-up entrance and exit

• Adjustable in and out durations

• Respects prefers-reduced-motion

Layout controls

• Fine-tune vertical offset

• Adjust gap spacing

• Left, center, or right alignment

Best used for

• Hero sections

• SaaS landing pages

• Feature intros

Refund policy

All sales are final. No refunds are offered after purchase.