# CLAUDE.md for a Remotion motion graphics project

When to use it: You make motion graphics or explainers in code with Claude Code and Remotion, and you want every session to follow the same rules for timing, fonts and renders.

Works with: [Remotion Agent Skills (official)](https://agentcut.dev/tools/remotion-agent-skills-official/), [Remotion MCP App](https://agentcut.dev/tools/remotion-mcp-app/), [Motion Graphics Skill Pack](https://agentcut.dev/tools/motion-graphics-skills-charlie947/)

Save as: CLAUDE.md

Download: https://agentcut.dev/prompts/md/claude-md-remotion.md

~~~~markdown
# 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 <CompositionId> out/<name>.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.
~~~~

Sources and credit:

* [Remotion, Prompting videos with coding agents](https://www.remotion.dev/docs/ai/coding-agents): Project setup commands
* [Claude Code docs, How Claude remembers your project](https://code.claude.com/docs/en/memory): What belongs in CLAUDE.md

---
AgentCut: https://agentcut.dev/ · All tools as JSON: https://agentcut.dev/tools.json · Overview for agents: https://agentcut.dev/llms.txt