Tailwind UI Pattern Registry for humans and agents

text reveal scroll entrance word-by-word animation headline hero headline entrance on scroll editorial section titles statement text in long-form pages headings appear abruptly without narrative context want word-level scroll reveal without GSAP or SplitText

Text Reveal

Fetch snippet JSON: curl https://webspire.de/snippets/text/text-reveal.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="text-reveal"><h2 data-split="words">Your headline here</h2></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
651 bytes · 29 lines
Custom Properties
--reveal-duration--reveal-distance--reveal-delay--reveal-easing
Classes
.text-reveal
text reveal scroll entrance word-by-word animation headline

Mark elements that should be word-split with data-split="words". The JS splits the text into <span data-word> elements and sets --word-index on each. When the container enters the viewport, .is-visible triggers the staggered CSS transition.

Hero headline

<div class="text-reveal">
  <h2 class="text-4xl font-bold" data-split="words">
    Build faster. Ship smarter.
  </h2>
  <p class="mt-4 text-lg text-gray-500" data-split="words">
    A design system for teams who care about craft.
  </p>
</div>

Tighter stagger

<div class="text-reveal" style="--reveal-delay: 40ms; --reveal-distance: 0.3em">
  <h1 data-split="words">Short. Sharp. Effective.</h1>
</div>