letter-spacing entrance expand fade cinematic heading uppercase uppercase eyebrow label entrance section header reveal on scroll cinematic film/brand title card loading splash screen text normal fade-in feels too simple for uppercase headers want a subtle "expand" reveal without character splitting need a one-element CSS-only cinematic text entrance
Letter Spacing In
Fetch snippet JSON:
curl https://webspire.de/snippets/text/letter-spacing-in.json Preview
Background
Customize
Quick Start
<p class="letter-spacing-in text-sm font-semibold uppercase tracking-widest">Featured Work</p>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 454 bytes · 24 lines
- Custom Properties
-
--ls-from--ls-to--ls-duration - Classes
-
.letter-spacing-in
letter-spacing entrance expand fade cinematic heading uppercase
A single-class effect with no JS and no character splitting. Apply .letter-spacing-in directly to the text element and it runs once on render.
Eyebrow label
<p class="letter-spacing-in text-sm font-semibold uppercase text-indigo-400">
Featured Work
</p>Customize the range
.letter-spacing-in {
--ls-from: -0.05em; /* tighter start */
--ls-to: 0.25em; /* wider end */
--ls-duration: 1.2s;
}Delayed entrance (within a stagger group)
<p class="letter-spacing-in" style="animation-delay: 0.4s; opacity: 0;">
Case Studies
</p>