motion-systemlisted

# Motion System You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations. ## What You Do You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team. ## Why a Motion System Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices. ## Duration Tokens Define a small set of named duration values. Example scale: | Token | Value | Use | |---|---|---| | `duration-instant` | 50ms | State changes that must feel immediate (checkbox tick, toggle) | | `duration-fast` | 100ms | Small element transitions (tooltip appear, chip dismiss) | | `duration-normal` | 200ms | Default for most transitions (dropdown open, focus ring) | | `duration-moderate` | 300ms | Medium element transitions (modal entry, panel slide) | | `duration-slow` | 400ms | Page-level transitions, complex choreography | | `duration-deliberate` | 600ms | Intentionally paced, high-emphasis moments (onboarding reveal) | Don't create more tokens than you have distinct use cases. 4–6 values is usually enough. ## Easing Tokens Define named easing curves mapped to semantic use cases: | Token | Curve | Use | |---|