Word Swap Hero
A headline that names each audience in turn, the last word melting into the next.
Controls
<HeroWordSwap />About
Built on Liquid Word Swap. For businesses with several audiences or services they want to name up front.
Use it when
- Two to six audiences or services fit one sentence.
Skip it when
- One audience: a static hero is clearer.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Headline | text | 80 chars | — |
| lead | Intro | text | 160 chars | — |
| primaryAction | Main button | action | 24 chars | — |
| secondaryAction | Second button | action | 24 chars | — |
| media | Image | image | — | — |
| words | Rotating words | list | up to 6 | — |
| words[] | Rotating word | text | 24 chars | — |
Variants
Centreddefault
centered
Centred headline; an optional wide image below.
Left
left
Left-aligned copy; an optional tall image right.
Accessibility and motion
- Keyboard
- The actions.
- Screen readers
- The h1 reads the fixed words and every rotating word as one list.
- Touch
- Nothing depends on hover.
- Reduced motion
- The first word shows; nothing swaps.
Edge cases and limits
- Six 24-character words: the line reserves the longest word's width.
Related
Editorial Hero
FreeA magazine opening: a large serif headline, the intro and actions, tags, and the photo framed tall or set as a band.
Heroes block · Server
Poster-size type that rises word by word on load, with the photo in a corner or set wide beneath.
Heroes block · Server
Bento Hero
FreeThe promise beside a three-tile mosaic: a tall photo, a second image and a card of what the business offers.
Heroes block · Server