stagger word entrance animation heading reveal skew tagline or subheading entrance marketing headline reveal multi-word CTA animation presentation slide text character stagger too fine-grained for longer text sentence appears all at once and lacks rhythm need per-word timing without a motion library
Word Stagger
Fetch snippet JSON:
curl https://webspire.de/snippets/text/word-stagger.json Preview
Background
Customize
Quick Start
<p class="word-stagger"><span class="word" style="--word-index:0">Build</span> <span class="word" style="--word-index:1">faster,</span> <span class="word" style="--word-index:2">ship</span> <span class="word" style="--word-index:3">better.</span></p>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 458 bytes · 22 lines
- Custom Properties
-
--word-index - Classes
-
.word-stagger.word
stagger word entrance animation heading reveal skew
Each .word span reads --word-index to calculate its animation-delay. Words slide up with a 2° skew that returns to zero, giving the entrance a natural, editorial feel.
Tagline
<p class="word-stagger text-2xl font-semibold">
<span class="word" style="--word-index: 0">Build</span>
<span class="word" style="--word-index: 1">faster,</span>
<span class="word" style="--word-index: 2">ship</span>
<span class="word" style="--word-index: 3">better.</span>
</p>JS split helper (optional)
document.querySelectorAll('.word-stagger').forEach(el => {
el.innerHTML = el.textContent.trim().split(/\s+/).map((w, i) =>
`<span class="word" style="--word-index:${i}">${w}</span>`
).join(' ');
});