# Motion System

Define motion tokens, durations, easing vocabulary, and reduced-motion handling, for...

- Repository: https://github.com/Owl-Listener/designer-skills (3196 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Owl-Listener/designer-skills --skill motion-system -g -a claude-code -y`
Codex: `npx skills add Owl-Listener/designer-skills --skill motion-system -g -a codex -y`
Cursor: `npx skills add Owl-Listener/designer-skills --skill motion-system -g -a cursor -y`
Gemini CLI: `npx skills add Owl-Listener/designer-skills --skill motion-system -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Owl-Listener/designer-skills`

## 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).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/Owl-Listener/designer-skills/blob/HEAD/design-systems/skills/motion-system/SKILL.md