claude-motion skill

---
name: motion-design
description: Taste rules for Remotion motion graphics — timing, easing, springs, typography, color, texture, and scene continuity, with concrete numbers. Use whenever you create, animate, retime, or polish a video, composition, scene, or transition in this repo.
---

# Motion design

Remotion teaches you the API. This file is the taste. Every number below comes from a shipped piece (`src/EffortVideo.tsx`); treat them as defaults you deviate from on purpose, not by accident.

## 1. Time lives in `timeline.json`

- Every beat is a named timestamp in seconds in `timeline.json`, grouped by scene (`s1`, `s2`, …). Components read it through `TL` from `src/lib.ts`; the video's cue sheet in `sfx/cues/` reads the same file. That is what keeps picture and sound locked.
- Never hardcode a start time inside a component. Offsets relative to a beat (`s1.exit + 0.05`) are fine.
- Retiming = editing `timeline.json`, then `npm run sfx` so audio follows.
- Everything is a pure function of `frame`. No CSS transitions or keyframes, no `Math.random()` (use `rand(n)`), no `Date`. Anything else flickers or drifts at render time.

## 2. Easing

| Curve | Use | Source |
|---|---|---|
| `easeOut` = `bezier(0.16, 1, 0.3, 1)` | entrances, reveals, anything arriving | `lib.ts` |
| `easeIn` = `bezier(0.6, 0, 0.9, 0.35)` | exits — leaves fast, doesn't linger | `lib.ts` |
| `easeInOut` = `bezier(0.65, 0, 0.35, 1)` | moves between two states (flip, dock, morph) | `lib.ts` |
| overshoot `bezier(0.55, 0, 0.2, 1.12)` | a value that "lands" (slider climbing to a level) | `effortAt` |

Linear is only for continuous motion: rotation, drift, grain, ticking hands.

Use `prog(t, t0, t1, ease)` for tweens and `band(x, a, b)` to derive one animation from another value (e.g. captions from the slider position) instead of giving it its own clock.

## 3. Springs (via `sp(frame, startSec, config)`)

| Feel | damping / stiffness / mass | Used for |
|---|---|---|
| default settle | 14 / 140 / 0.8 | general UI entering |
| heavy, calm | 15–20 / 140–240 / 0.6–1 | big panels, the rewind |
| knob / notch | 12 / 190 / 0.75 | a control snapping to a step |
| pop | 9–11 / 200–230 / 0.7 | callouts, badges, success dots |
| elastic accent | 8 / 200 | one hero moment per video, not more |

Springs for things that feel physical (UI, objects). Bezier tweens for type and camera-like moves.

## 4. Timing

- **Stagger** words by ~0.09 s, list items/chips by ~0.2–0.25 s, rings/dots by ~0.06 s.
- **Word reveal** ≈ 0.8 s with `Mask` (slide up out of a clip + slight tilt).