Split-Text Reveal

Create a split-text reveal headline. Take a headline and split it into words. Wrap every word in an outer span with overflow: hidden, and an inner span that starts at transform: translateY(110%) and animates to translateY(0). Each word animates over 1s with cubic-bezier(0.22, 1, 0.36, 1), and words are staggered 80ms apart, so the line rises into view word after word. Trigger the animation when the headline first enters the viewport (IntersectionObserver), and run it only once. Typography: large display size, heavy weight (700-800), tight letter-spacing around -0.05em, line-height close to 1. If prefers-reduced-motion is enabled, skip the animation and render the headline fully visible immediately. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.