Foundations
Motion
Physical, and used sparingly. Presses spring back; numbers count up and bars grow once, on first view; nothing loops. Everything collapses to instant under prefers-reduced-motion. Animate only transform and opacity.
| Token | Value |
|---|---|
--duration-instant | 90ms |
--duration-fast | 140ms |
--duration-base | 220ms |
--duration-slow | 360ms |
--duration-press | 450ms |
--duration-chart | 900ms |
--duration-count | 1100ms |
--easing-out | cubic-bezier(0.22, 1, 0.36, 1) |
--easing-spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
--easing-snap | cubic-bezier(0.2, 0, 0, 1) |
--easing-chart | cubic-bezier(0.22, 1.2, 0.36, 1) |
See it movePress the button to feel the spring. Replay grows the bars and counts the number again.
Weekly volume
12,480 kg
Every theme presses differently: Graphite, Glass, Paper, Mineral, Enamel, Ember. Enamel pushes into its shadow; the rest spring in scale.