Blur Focus Reveal
X-ray · layers
Parameters
How this effect works
There is no animation code running per frame here — the whole move is a CSS transition. Each word starts in its "unfocused" state: blurred with filter: blur(), transparent, and slightly oversized. Then we flip every word to its final state — sharp, opaque, normal size — and hand the browser one instruction: take this long to get there. The browser interpolates blur, opacity and scale on the compositor, which is why it stays smooth even on phones.
The stagger layer is a single extra number: word i gets a transition delay of i × DELAY milliseconds, so the words don't arrive as a block but as a wave rolling through the sentence. The zoom layer starts each word slightly too big — that's the camera language: things out of focus feel closer, and "shrinking into place" reads as the lens locking on. Blur is the one honest cost in this effect: it's a real gaussian filter, which is why it runs on a headline, not on paragraphs.