motion-design

# Motion Design

## Overview

Design intentional, purposeful motion for product UI. This skill evaluates animation needs and recommends specific easing curves, durations, and implementation approaches based on interaction frequency and purpose.

Every animation needs a job. If it has no job, don't animate.

## Process

### Phase 1: Load References (Required)

Before any recommendations, read both reference files:

1. **Decision Tree** (`references/decision-tree.md`) - Which easing category to use based on the interaction type, plus scale/origin/hover guidance
2. **Easing Tokens** (`references/easing-tokens.md`) - Specific curves, duration values, and performance guidelines

### Phase 2: Evaluate the Animation

For each component or interaction, determine:

**2.1 Purpose**

What job does this animation do?

- **Responsiveness** - Button press, menu open, immediate feedback
- **Spatial continuity** - Things come from somewhere and go somewhere
- **Understanding** - Illustrating a concept, onboarding, marketing
- **Delight** - Rare interactions only (use sparingly)

If no clear purpose exists, recommend no animation.

**2.2 Frequency**

How often will users trigger this?

- **High-frequency / keyboard-driven** - Prefer no animation or near-instant
- **Medium-frequency / common interactions** - Keep it fast (120-240ms)
- **Low-frequency / illustrative** - More freedom for slower, richer motion

**2.3 Pattern Type**

What kind of motion is this?

- **Enter/exit** - Popover, modal, toast, dropdown appearing or leaving (exits are typically faster than enters—users want things gone quickly)
- **On-screen morph** - Layout shift, expanding content, repositioning
- **Time-based** - Progress indicator, marquee, hold-to-delete
- **Hover/subtle** - Color change, opacity fade, background shift
- **Keyboard navigation** - Arrow keys, tab focus, rapid selection

### Phase 3: Recommend

Based on the evaluation, provide specific recommendations using tokens from the reference files.