motion-system
Installation
SKILL.md
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 |