Cascade

Build a fullscreen preloader called Cascade.

Centre a five by five grid of white squares on a near-black stage. Each cell is about 6.5% of the stage's smaller dimension with a soft 1.4% corner radius, separated by 2.6% gaps.

Give every cell the same 2.8s ease-in-out animation: scale 0.38 at 20% opacity for most of the cycle, peaking at scale 1 and full opacity at 26% of the timeline, then settling back by 58% and resting until the loop restarts. The rest gap matters, since without it the grid never returns to a calm state and the wave has nothing to arrive into.

The whole effect comes from the delay. Set each cell's animation-delay to its row index plus its column index, multiplied by 75ms. Cells sharing a diagonal then fire together, and the pulse sweeps from the top-left corner to the bottom-right one, taking about 600ms to cross a 2.8s loop.

Derive the row and column from the cell's position in the list, never from a random number. A random stagger changes between the server render and the browser render and will cause a hydration mismatch; an index is stable, and it also makes the wave direction something you can deliberately reverse later.

Loop forever. Under prefers-reduced-motion, hold every cell at full size.