Blur In Text

Build a blur-in headline reveal. Split the headline into words, each in its own inline-block span (keep natural word spacing with gaps, and let lines wrap normally). The reveal: each word starts at opacity 0, filter blur(9px), and 6px below its resting place. Words resolve in reading order - opacity to 1, blur to 0, y to 0 - each taking 0.55s with a decisive ease like cubic-bezier(.22,1,.36,1), staggered ~110ms apart. The effect should feel like focus being pulled on a lens, word by word. Trigger it when the headline scrolls into view (IntersectionObserver, once). For emphasis, let the final word land in the accent color - the sentence resolves onto its point. Performance note: animating filter is compositor-friendly in small doses like this, but don't run it on whole paragraphs - this is a headline effect (5-9 words). Accessibility: the text must be selectable and readable by screen readers as one sentence - animate spans, never split into absolutely-positioned fragments. Under prefers-reduced-motion the headline renders sharp immediately. Colors as tokens: ink text, one accent for the landing word. 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.