flip word slot-machine ticker cycle headline text-rotation hero headline with rotating adjectives ("fast / scalable / beautiful") homepage tagline cycling through features animated label in a CTA button value proposition rotating ticker static hero headline sells only one value JS-based word rotators add unnecessary weight need a looping text cycle without a dependency
Flip Word
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/flip-word.json Hello, World
This element animates in
Background
Customize
Quick Start
<h1>We build <span class="flip-word h-[1.2em]"><span class="flip-word-list"><span class="flip-word-item">fast</span><span class="flip-word-item">bold</span><span class="flip-word-item">smart</span></span></span> products.</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 662 bytes · 32 lines
- Custom Properties
-
--flip-duration - Classes
-
.flip-word.flip-word-list.flip-word-item
flip word slot-machine ticker cycle headline text-rotation
Wrap one .flip-word inline in a heading. Give it a fixed height equal to the line-height (h-[1.2em]) so only one word shows at a time. The .flip-word-list stacks words vertically and cycles through them.
The keyframe pauses at each word for 75% of each quarter-cycle, then snaps to the next — readable at a glance.
Hero headline
<h1 class="text-5xl font-bold">
We make things
<span class="flip-word h-[1.2em] text-indigo-400" style="--flip-duration: 3s;">
<span class="flip-word-list">
<span class="flip-word-item">fast.</span>
<span class="flip-word-item">bold.</span>
<span class="flip-word-item">smart.</span>
<span class="flip-word-item">yours.</span>
</span>
</span>
</h1>Adjusting for word count
The keyframe assumes 4 words. For 3 words, override:
@keyframes flip-words {
0%, 28% { transform: translateY(0%); }
33%, 61% { transform: translateY(-100%); }
66%, 94% { transform: translateY(-200%); }
100% { transform: translateY(-300%); }
}