motion-design

Topics in the source

• Motion design
• 1. Time lives in timeline.json
• 2. Easing
• 3. Springs (via sp(frame, startSec, config))
• 4. Timing
• 5. Typography
• 6. Color
• 7. Texture — nothing is dead-still

Full Production Studio note: this skill drives the toolkit in whaleyxbt/claude-motion. Clone that repo and run your agent inside it for the scripts/paths below to work; the guidance itself is usable anywhere. 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. 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. | 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 =

This is an excerpt. Refer to the complete source and its current requirements.