Animation System

Demo

Click to play with sound.

---
name: Animation System
description: Design a coherent motion system of durations, easing, and choreography for UI.
---

# Animation System

Use this skill to build a motion system that feels intentional and consistent
instead of ad-hoc transitions scattered across components.

## Motion has a job

Animation should do work: direct attention, show cause and effect, express
hierarchy, or soften a change. If a motion does none of these, cut it.

## Step 1: Define duration tokens

Establish a small scale. Faster for small/near elements, slower for large/far ones.

- `instant`: 0ms (state with no transition)
- `fast`: 100ms (hovers, small toggles)
- `base`: 200ms (most transitions)
- `slow`: 300ms (modals, sheets, page-level)
- `deliberate`: 500ms (large or first-run reveals)
… install to load the full skill