← All effects
Split Reveal
click the stage to replay
-- fps
prefers-reduced-motion detected — text shown in place, no motion
X-ray · layers
words rise from behind a hidden edge
one after another, not all at once
out of focus while moving
Parameters
Your text
Duration700 ms
Stagger step70 ms
Rise distance100%
Blur amount8 px
your version · updates as you tinker
How this effect works
Each word gets wrapped in a box with overflow: hidden, and the word itself starts pushed down out of that box. Animate the word back to zero and it appears to rise from behind an invisible edge. That edge is the whole trick — turn the mask layer off above and the words slide in from below in plain sight, which instantly looks cheap. The mask is what makes it feel deliberate.
Stagger is one multiplication: word number × step in milliseconds becomes that word's delay. Set the step to zero and every word moves together — technically the same animation, emotionally nothing. The blur layer fakes motion blur by starting each word out of focus and sharpening it as it settles, which is what sells the speed.
Production notes: respects prefers-reduced-motion (text appears in place, no movement) · animation is pure CSS transform + opacity, so it runs on the compositor and stays cheap · your text is escaped before it reaches the page — never inject raw HTML · the copied snippet is self-contained HTML + CSS + JS.