Rotating words
Also called rotating text, word rotator, or flip words
A headline where one word keeps changing in place, rolling or fading through a short list while the rest of the sentence stays put.
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
const WORDS = ['website', 'dashboard', 'game', 'store'];
const HOLD_MS = 2000;
const ROLL = { duration: 0.4, ease: [0.23, 1, 0.32, 1] } as const;
export function RotatingHeadline() {
const reduceMotion = useReducedMotion();
const [index, setIndex] = useState(0);
const [width, setWidth] = useState<number>();
const measure = useRef<HTMLSpanElement>(null);
const word = WORDS[index]!;
useEffect(() => {
if (reduceMotion) return;
const timer = setInterval(
() => setIndex((i) => (i + 1) % WORDS.length),
HOLD_MS
);
return () => clearInterval(timer);
}, [reduceMotion]);
// Measure the next word before paint so the slot can animate to fit it.
useLayoutEffect(() => setWidth(measure.current!.offsetWidth), [word]);
return (
<h1 className='text-5xl leading-tight font-bold tracking-tight'>
<span className='sr-only'>
Build a website, dashboard, game, or store
</span>
<span aria-hidden>
Build a{' '}
<span ref={measure} className='invisible absolute whitespace-nowrap'>
{word}
</span>
<motion.span
initial={false}
animate={{ width }}
transition={ROLL}
className='relative inline-flex overflow-hidden align-bottom text-blue-600'
>
<AnimatePresence mode='popLayout' initial={false}>
<motion.span
key={word}
initial={{ y: '100%' }}
animate={{ y: 0 }}
exit={{ y: '-100%' }}
transition={ROLL}
className='whitespace-nowrap'
>
{word}
</motion.span>
</AnimatePresence>
</motion.span>
</span>
</h1>
);
}In the hero headline "Build a ___", rotate the last word through "website", "dashboard", "game", and "store" every 2 seconds: the old word slides up and out while the new one slides up from below over 400ms with an ease-out curve, inside a clipped slot whose width animates to fit each word. Give screen readers the full list in one sentence, and stay on the first word when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Rotating words?
Rotating words keep most of a headline fixed and swap a single word on a timer: "Build a website", then "dashboard", then "game". The new word usually rolls up from below as the old one leaves through the top, flips like a split-flap board, or fades in from a blur.
It lets one line speak to several audiences or use cases without a carousel. Three to five options is plenty, each held for about two seconds so people can read every one.
Words of different lengths can push the rest of the line around. Animate the slot width to fit each word, or size the slot to the longest word. Screen readers should hear one steady sentence, such as "Build a website, dashboard, game, or store", and the rotation should stop for people who prefer reduced motion.
Often confused with
- Typewriter effect
- A typewriter can also cycle phrases, but it types and deletes them letter by letter. Rotating words swap a whole word in one motion.
Related terms
All termsTypewriter effect
A text animation that reveals a line one character at a time, as if someone were typing it, usually with a blinking caret at the end.
Text morph
A text transition where the letters two words share slide to their new spots while the others fade out or in, so a label changes without a hard cut.
Enter and exit animations
The pair of animations an element plays as it is added to the page and as it is removed, so changes to a list or layout are easy to follow.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.