Word Morph
Rotating words in a headline. Letters blur in with a stagger and the slot animates its width so nothing jumps.
Overview
The classic rotating headline, done carefully. Each new word arrives letter by letter, rising out of a soft blur with a short stagger. The slot measures the incoming word and animates its width, so the rest of the sentence slides smoothly instead of snapping when “you” becomes “record labels”.
Screen readers get one full sentence listing every word instead of a stream of changes. With reduced motion, words swap instantly and widths don’t animate.
Use it for hero headlines that need to speak to several audiences. Keep it to three to six words.
When to use
- Headlines, numbers and moments you want people to notice once.
When not to use
- Text that changes constantly or must be read at a glance.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/word-morph.jsonnpx shadcn@latest add https://sundaeui.dev/r/word-morph.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/word-morph.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/word-morph.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy word-morph.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { WordMorph } from '@/components/sundae/word-morph'
<h1>
<WordMorph before="Software for " after="." words={['studios', 'clinics', 'restaurants']} />
</h1>Props
| Prop | Type | Default |
|---|---|---|
words*Words to rotate. | string[] | — |
intervalTime on each word, in ms. | number | 2400 |
before / afterSurrounding text, included in the accessible sentence. | string | — |
classNameStyle the visible word via [aria-hidden] > span. | string | — |
Accessibility
- Visible animation is aria-hidden. Assistive technology reads a single static sentence.
- Reduced motion disables blur, stagger and width animation.
Customization
- Change the stagger (28ms per letter) and blur (8px) in wm-in.
FAQ
- Is Word Morph free?
- Word Morph is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Word Morph?
- Run npx shadcn@latest add https://sundaeui.dev/r/word-morph.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Word Morph support keyboard and screen readers?
- Visible animation is aria-hidden. Assistive technology reads a single static sentence. Reduced motion disables blur, stagger and width animation.
- Does Word Morph respect reduced motion?
- Reduced motion disables blur, stagger and width animation.
More like this
All motion →Decode Text
Motion · Futuristic- Pro
Split-Flap Display
Motion · Brutalist - Pro
Magnetic Button
Motion · Playful - Pro
Billboard Hero
Sections · Brutalist Margin Quote
Sections · Editorial- Pro
Atelier
Templates · Editorial