motion-design
Installation
SKILL.md
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 throughTLfromsrc/lib.ts; the video's cue sheet insfx/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, thennpm run sfxso audio follows. - Everything is a pure function of
frame. No CSS transitions or keyframes, noMath.random()(userand(n)), noDate. 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 |