# Project: motion graphics in Remotion This folder is a Remotion project. I am a video editor, not a developer. Explain changes in plain words. ## Setup facts - Preview: `npm run dev` (Remotion Studio). I keep it open in another terminal. - Render: `npx remotion render out/.mp4` - Remotion Agent Skills are installed (`npx remotion skills add`). Use them for anything Remotion specific before guessing an API. - Brand rules live in `brand/DESIGN.md`. Read it before you design anything. ## Video rules - Default composition: 1920x1080, 30 fps. Vertical versions: 1080x1920, same fps. - Never change fps or dimensions of an existing composition unless I ask. - Express all timing in frames, and name it: `const IN = 12; const HOLD = 60;` - Every animation needs an in, a hold and an out. Text holds at least 1.5 seconds per line so people can read it. - Use `spring()` or `interpolate()` with easing. No linear moves on anything that enters or leaves the frame. - Keep all text inside the safe area from `brand/DESIGN.md`. - Fonts load through `@remotion/google-fonts` or local files in `public/fonts`. Never rely on system fonts. ## How to work with me 1. Before writing code, describe the animation in 3 to 6 short beats with frame numbers and wait for my OK. 2. Build one scene at a time as its own component in `src/scenes/`. 3. After each change, tell me which composition to look at in Studio and at which frame. 4. Make every word, number, color and duration a prop with a default value, so I can change it in Studio without code. 5. Do not install new packages without asking. ## Before you say it is done - The composition renders without errors. - No text is cut off at any frame (check the longest prop values). - Audio, if any, starts and ends on the frames we agreed.