Motion study

Staggered Grid Card Pop

Loading…
Scene

Overview

Each card scale-pops from ~0.86 with a stagger. Guide lines optional.

Build

  1. 01

    cards[] with {x,y,w,h,popAt}.

  2. 02

    scale 0.86→1, 200–280ms ease-out.

.card { animation: 240ms pop both; animation-delay: var(--i) * 80ms }
Example source React / TSX

examples/staggered-grid-card-pop.tsx · Uses the catalog’s shared composition helpers.

Loading source…