motion-system

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 | Show more Installs 949 Repository owl-listener/de…r-skills GitHub Stars 2.3K First Seen May 6, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass