TextSplitReveal

By character

Each character rises from beneath a hidden clip with a spring stagger. The delay is calc(var(--char-index) * 30ms) — pure CSS, zero JS timers.

By word

Words rise as whole units — ideal for headlines where character-level stagger feels too busy. Delay uses calc(var(--word-index) * 60ms).

Intersection trigger

With triggerMode="intersect" the animation fires once the element scrolls into view. Use the button below to remount and retrigger.

How it works

splitText(node, { by: 'char' }) wraps each character in a <span> stamped with --char-index and --char-total CSS custom properties. The animation stagger is entirely in CSS:

transition-delay: calc(var(--char-index, 0) * 30ms);

Accessibility: the container gets aria-label with the original text; all injected spans are aria-hidden. Reduced-motion: full text shown immediately, no transforms.