wave character animation loop playful loader loading state heading animation playful logo text app name reveal or decoration thinking-indicator in chat UI static text feels lifeless in loading or idle states need a continuous text animation without canvas or JS want character-level wave without a motion library
Wavy Text
Fetch snippet JSON:
curl https://webspire.de/snippets/text/wavy-text.json Preview
Background
Customize
Quick Start
<span class="wavy-text"><span class="char" style="--char-index:0">W</span><span class="char" style="--char-index:1">e</span><span class="char" style="--char-index:2">b</span></span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 382 bytes · 17 lines
- Custom Properties
-
--char-index - Classes
-
.wavy-text.char
wave character animation loop playful loader
Each .char span bounces on a sine-wave schedule determined by --char-index. The animation runs infinitely, making it suitable for loaders and decorative headings.
Wave heading
<h1 class="wavy-text text-4xl 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>
<span class="char" style="--char-index: 5"> </span>
<span class="char" style="--char-index: 6">👋</span>
</h1>JS split helper
document.querySelectorAll('.wavy-text').forEach(el => {
el.innerHTML = [...el.textContent].map((ch, i) =>
`<span class="char" style="--char-index:${i}">${ch === ' ' ? ' ' : ch}</span>`
).join('');
});