← All effects
Staggered Grid Reveal
Scroll down — the grid enters as a wave…
scroll inside ↓
-- fps
prefers-reduced-motion detected — tiles appear in place, no wave
X-ray · layers
tiles fade up into place
delay grows across the grid
off = row by row
Parameters
Columns4
Step delay70 ms
Rise distance28 px
Tile time550 ms
your version · updates as you tinker
How this effect works
Every tile plays the same tiny entrance — fade in, rise a few pixels — and the wave is nothing but who starts when: tile at row r, column c waits (r + c) × step milliseconds. Summing row and column makes the delay grow along diagonals, so the entrance sweeps from the top-left corner like wind over a field. Switch diagonal off and the delay uses the row alone — same tiles, and suddenly it reads as typewriter lines instead of wind.
The trigger is an IntersectionObserver on the grid (the Count-in pattern): the wave fires when the grid actually enters your view, replaying when you scroll back. The entrance itself is a CSS transition per tile — JS only sets the start state and the per-tile delay, then the browser carries all the motion.
Production notes: prefers-reduced-motion: tiles render in place, no rise or wave · transitions on transform/opacity only · keep step × gridSize under ~1.5s — a wave that outlives the reader's patience is a loading screen · the copied snippet is self-contained with its own demo scroll box.