디자인 아틀라스
EN
↝ 모션

스태거드 그리드 웨이브

Staggered grid wave

그리드의 각 셀이 인덱스 순서가 아니라 중심점으로부터의 거리에 비례해 지연되며 움직이는 기법. 연못에 돌을 던진 것처럼 한 지점에서 물결이 바깥으로 퍼져나갑니다.

다른 이름: 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);
  }
}

기본 스태거는 delay = 인덱스 × 간격으로 계산해 1번, 2번, 3번… 순서대로 늦어지는 "줄"의 움직임을 만듭니다. 스태거드 그리드 웨이브는 그 대신 delay = 거리 × 간격을 씁니다 — 여기서 거리는 각 셀의 (행, 열)과 중심 셀의 (행, 열) 사이 유클리드 거리(피타고라스)입니다. 중심에 가까운 셀일수록 먼저 움직이고, 멀어질수록 점점 늦게 움직여 원형으로 퍼지는 물결이 만들어집니다.

무한 반복 애니메이션이라면 각 셀에 animation-delay를 음수로 주는 방법이 편리합니다 — delay: -(거리 × 간격)초로 주면 모든 셀이 이미 그 지점만큼 재생된 상태로 시작하므로, 별도의 시작 트리거 없이도 계속 순환하는 물결이 됩니다.

중심점을 그리드 정중앙이 아니라 마우스 커서 위치로 바꾸면 사용자가 셀 위를 지나갈 때마다 물결이 손끝에서 퍼지는 인터랙션이 됩니다 — 이 경우 거리 계산을 매 마우스 이동마다 다시 해야 하므로, 셀 수가 많으면(수백 개 이상) 쓰로틀링이 필요합니다.

언제 쓰나

히어로 배경, 로딩 화면처럼 한 지점에서 퍼지는 느낌이 필요할 때 씁니다. 목록·카드처럼 읽는 순서가 있는 콘텐츠에는 순서를 흐트러뜨리는 방사형보다 인덱스 기반 스태거가 맞습니다.