Motion study

Staggered Metric Table

Loading…
Scene

Overview

Title, then headers, then rows rising into grid positions while numeric cells count up.

Build

  1. 01

    Title rises.

  2. 02

    Headers fade.

  3. 03

    Rows stagger upward into y-slots.

  4. 04

    Volume / percent cells count up.

row[i].y = lerp(below, slotY[i], easeOut)
cell.text = format(count(t))
Example source React / TSX

examples/staggered-metric-table.tsx · Uses the catalog’s shared composition helpers.

Loading source…