Design Atlas
한국어
↝ Motion

Staggered grid wave

스태거드 그리드 웨이브

Delaying each grid cell not by its index order but by its distance from a center point — a ripple spreading outward from one spot, like a stone dropped in a pond.

Also known as: Radial staggerRipple grid
···
html
<div class="grid" id="grid"></div>
css
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6%;width:76%;aspect-ratio:1}
.grid i{border-radius:50%;background:var(--accent);animation:wave 2.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:scale(.35);opacity:.3;background:var(--accent)}50%{transform:scale(1);opacity:1;background:var(--accent-2)}}
js
const grid = document.getElementById('grid');
const SIZE = 7;
const center = (SIZE - 1) / 2;
for (let r = 0; r < SIZE; r++) {
  for (let c = 0; c < SIZE; c++) {
    const dist = Math.hypot(r - center, c - center);
    const dot = document.createElement('i');
    dot.style.animationDelay = (-dist * 0.14) + 's';
    grid.appendChild(dot);
  }
}

An ordinary stagger computes delay = index × interval, producing a "row" of motion that lags in order: cell 1, then 2, then 3. A staggered grid wave uses delay = distance × interval instead — where distance is the Euclidean (Pythagorean) distance between each cell's (row, column) and the center cell's. Cells near the center move first; cells farther out lag progressively more, and the result reads as a circular ripple spreading outward.

For an infinitely looping animation, giving each cell a negative animation-delay is convenient — delay: −(distance × interval) seconds means every cell starts as if it had already played that far into the loop, so the ripple keeps cycling with no separate trigger needed.

Swap the center point from the grid's middle to the mouse cursor's position, and it becomes an interaction — a ripple spreading from wherever the user's pointer crosses the grid. That means recomputing distance on every pointer move, so with many cells (several hundred or more) you'll want to throttle it.

When to use

Use it for hero backgrounds or loading screens where you want a sense of spreading from one point. For lists and cards with a reading order, index-based stagger fits better — radial delay scrambles the order the eye expects.