stagger character entrance animation heading reveal hero heading entrance on page load logo or brand name reveal short CTA text animation onboarding step label text appears all at once and feels static Framer Motion / GSAP overhead for a simple entrance need per-character timing without JavaScript
Character Stagger
Fetch snippet JSON:
curl https://webspire.de/snippets/text/char-stagger.json Preview
Background
Customize
Quick Start
<h1 class="char-stagger"><span class="char" style="--char-index:0">H</span><span class="char" style="--char-index:1">e</span><span class="char" style="--char-index:2">l</span><span class="char" style="--char-index:3">l</span><span class="char" style="--char-index:4">o</span></h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 435 bytes · 22 lines
- Custom Properties
-
--char-index - Classes
-
.char-stagger.char
stagger character entrance animation heading reveal
Each .char span reads --char-index to calculate its animation-delay. Wrap every character manually for short headings, or use a small textContent.split('') loop for longer text.
Hero heading
<h1 class="char-stagger text-5xl font-bold">
<span class="char" style="--char-index: 0">H</span>
<span class="char" style="--char-index: 1">e</span>
<span class="char" style="--char-index: 2">l</span>
<span class="char" style="--char-index: 3">l</span>
<span class="char" style="--char-index: 4">o</span>
</h1>JS split helper (optional)
document.querySelectorAll('.char-stagger').forEach(el => {
el.innerHTML = [...el.textContent].map((ch, i) =>
`<span class="char" style="--char-index:${i}">${ch === ' ' ? ' ' : ch}</span>`
).join('');
});