motion-system
owl-listener/designer-skills
Define motion tokens and choreography rules for consistent, accessible animation across your product.
What is motion-system?
A motion-system skill helps you establish a standardized vocabulary for animation — duration scales, easing curves, and reduced-motion handling — so every team makes consistent animation decisions. Use this when building a design system or standardizing motion across a product; for crafting individual animations, use animation-principles instead.
- Define duration tokens (instant, fast, normal, moderate, slow, deliberate) mapped to specific UI use cases
- Create easing tokens (standard, decelerate, accelerate, spring, linear) with semantic purposes for different interaction types
- Establish choreography rules for staggering, coordination, and sequence timing when multiple elements animate together
- Implement reduced-motion handling at the system level using CSS custom properties and prefers-reduced-motion media queries
- Document motion principles grounded in your product's values (purposeful, quick, physical, accessible)
How to install motion-system
npx skills add https://github.com/owl-listener/designer-skills --skill motion-systemHow to use motion-system
- 1.Define a duration scale (4–6 tokens) with specific use cases for each value, from instant to deliberate
- 2.Create easing tokens mapped to semantic purposes: standard for state changes, decelerate for entry, accelerate for exit, spring for playful interactions, linear for loops
- 3.Document choreography rules: stagger related elements by 30–50ms, keep sequence totals under 500ms, maintain direction consistency
- 4.Implement duration and easing as CSS custom properties (or platform-equivalent tokens) in your design token export pipeline
- 5.Add reduced-motion overrides at the :root level using prefers-reduced-motion, substituting instant or fade transitions for motion-heavy animations
- 6.Write 3–5 motion principles grounded in your product's values and include them in your design token documentation
- 7.Test all motion on low-powered devices and add motion to your design QA checklist alongside color and spacing
Use cases
- Standardizing animation durations and easing across a design system so all components feel cohesive
- Defining how multiple elements should stagger and coordinate when entering or exiting together
- Ensuring animations respect user accessibility preferences and reduced-motion settings globally
- Creating a shared motion vocabulary between design and engineering teams to reduce ad-hoc animation decisions
- Establishing rules for when elements should animate versus remain instant based on interaction type
- Design system owners and maintainers
- Product designers building or scaling a design system
- Frontend engineers implementing motion tokens in CSS or component libraries
- Teams standardizing animation behavior across multiple products or platforms
motion-system FAQ
Start with 4–6 duration tokens and 4–5 easing tokens. Add new tokens only when a genuine use case doesn't fit existing values; avoid creating tokens for one-off animations.
Define a duration-instant override (0ms or 1ms) applied globally under prefers-reduced-motion, and replace sliding/scaling/rotation animations with instant changes or simple opacity fades. Preserve animations that convey essential state (loading spinners, progress).
motion-system defines the system-wide vocabulary and rules (tokens, choreography, accessibility). animation-principles helps you craft a single, specific animation using design principles.
Yes. All motion should reference duration and easing tokens so decisions are consistent and maintainable. Document what should NOT animate as clearly as what should.
Test on low-powered devices early; smooth motion in design tools can be janky in production. Include motion in your design QA checklist and validate that reduced-motion overrides work correctly.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: motion-system
description: Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use animation-principles (interaction-design).
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
More from owl-listener/designer-skills and the wider catalog.
naming-convention
Establish predictable naming conventions for design components, tokens, and layers.
navigation-patterns
Select and design navigation patterns (tabs, drawer, hierarchy, hub) matched to your product structure and user tasks.
north-star-vision
Define a compelling long-horizon product vision that aligns teams and anchors strategic decisions.
onboarding-design
Design first-run experiences that get users to value fast and build confidence.
opportunity-framework
Identify, score, and prioritize design opportunities against impact and effort.
pattern-library
Document reusable design patterns with problem context, solution, anatomy, and related patterns.