Motion
Spec
Very little motion, on purpose. What exists is recorded here as it is built.
| Token | Value | Use |
|---|---|---|
| --duration-balance | 300ms | A balance that moved: cross-fade to the new value, then scale up and back. |
| --duration-balance-tint | 600ms | Reduced motion: the moved balance gets a tint instead, no scaling. |
| --duration-toast-fade | 200ms | Toasts fade in and out (kept in sync with FADE_MS in ToastProvider). |
Rules
- Motion explains a change; it never decorates.
- Only balances that moved animate, and changes are announced to screen readers.
- Toasts fade; they don't slide. Coach marks and dialogs appear without sliding or fading.
- Reduced motion: balances tint instead of scaling; toasts appear and disappear without sliding.
Gaps and open questions
- No easing tokens: easing is written in each component. Worth adding standard and emphasized curves?
- Loading states (#72) will add a shimmer, a moving bar and a spinner, each needing a duration and a still version.
- The New version bar and What's new card have no motion spec; today they appear without animation.
Changes
- 1.0.0, Oct 10 2026: First record of what is built: three durations and the reduced-motion rules. No easing tokens yet.