Motion study

Card Rect Morph to Grid

Loading…
Scene

Overview

Lerp the hero card's x/y/w/h into a grid slot. Then pop the remaining cells.

Build

  1. 01

    Hero card holds.

  2. 02

    Lerp rect hero → slot.

  3. 03

    Stagger-pop the other cells.

card { x,y,w,h = lerp(fromRect, toRect, ease) }
Example source React / TSX

examples/card-rect-morph-to-grid.tsx · Uses the catalog’s shared composition helpers.

Loading source…