Motion System
- 677 installs
- 2k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
motion-system is a designer skill that defines duration tokens, easing vocabulary, choreography rules, and reduced-motion handling for developers who need consistent, accessible animation across a product's UI.
About
motion-system is a designer-skills entry that treats motion as a systematic token layer instead of one-off animations. It defines duration scales, easing curves, choreography rules, and accessibility handling including reduced-motion preferences so transitions stay consistent across components and platforms. Without a system, each component picks its own timing and easing, which makes products feel disjointed and harder to implement uniformly. Developers and designers reach for motion-system when establishing or refactoring a design system's animation vocabulary before engineering ships Framer Motion, CSS transitions, or native animation APIs.
- motion-system
Motion System by the numbers
- 677 all-time installs (skills.sh)
- +84 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #541 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill motion-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 677 |
|---|---|
| repo stars | ★ 2k |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you define a motion design token system?
Use motion-system for development tasks
Who is it for?
Design-system contributors standardizing animation timing and easing before frontend engineers implement shared motion primitives.
Skip if: One-off marketing landing page animations with no design system, backend-only tasks, or projects with no motion or transition requirements.
When should I use this skill?
The user asks for motion tokens, easing scales, animation choreography rules, or reduced-motion guidelines for a product design system.
What you get
Motion duration tokens, easing vocabulary, choreography rules, and reduced-motion accessibility guidelines ready for engineering handoff.
- motion token spec
- easing vocabulary
- reduced-motion guidelines
Files
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 |
|---|---|---|
ease-standard | cubic-bezier(0.2, 0, 0, 1) | Most UI transitions — elements moving between states |
ease-decelerate | cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen |
ease-accelerate | cubic-bezier(0.3, 0, 1, 0.3) | Elements leaving the screen |
ease-spring | spring / cubic-bezier(0.34, 1.56, 0.64, 1) | Playful or tactile interactions (FAB expand, drawer bounce) |
ease-linear | linear | Looping animations only (progress spinners, shimmer) |
Choreography Rules
When multiple elements animate together:
- Stagger: related elements entering together stagger by 30–50ms; lead with the most important
- Coordination: elements in the same semantic group use the same duration and easing
- Sequence total: total duration of a staggered sequence should not exceed 500ms
- Direction consistency: if elements slide in from the right, related outgoing elements slide out to the left
Reduced Motion
The prefers-reduced-motion: reduce media query must be handled at the system level, not component by component:
- Disable: remove sliding, scaling, and rotation animations
- Replace: substitute instant state changes or simple opacity fades (opacity transitions are generally acceptable)
- Preserve: keep animations that convey essential state information (loading spinners, progress)
- Token approach: define a
duration-instant(0ms or 1ms) override for all duration tokens under reduced-motion, applied globally
Implementation
- Define duration and easing values as CSS custom properties (or platform-equivalent tokens)
- Apply reduced-motion overrides at the
:rootlevel within aprefers-reduced-motionquery - Document each token with: name, value, use case, and a live example
- Include motion tokens in the design token export pipeline — they should live alongside color and spacing tokens
Motion Principles (to define per product)
Every product's motion system should be grounded in 3–5 principles:
- Example: "Purposeful — every animation communicates a state change or relationship"
- Example: "Quick — UI motion is never slow; we respect users' time"
- Example: "Physical — motion follows natural physics; decelerate on entry, accelerate on exit"
- Example: "Accessible — all motion respects user preferences and never causes discomfort"
Best Practices
- Start with fewer tokens and add only when a new use case genuinely doesn't fit existing values
- Test all motion on low-powered devices — what's smooth in design tools can be janky in production
- Include motion in design QA checklists alongside color and spacing
- Document what should NOT animate as clearly as what should — not everything moves
Related skills
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kFAQ
What does the motion-system skill define?
motion-system defines duration scales, easing curves, choreography rules, and reduced-motion handling as a token layer. The output gives teams consistent animation vocabulary implementable across web and mobile UI.
Why use motion-system instead of per-component animations?
motion-system prevents ad hoc durations and easing on each component, which creates inconsistent transitions. A shared token layer keeps animation purposeful, accessible, and easier for engineers to implement uniformly.