# First motion graphic with Claude Code + Remotion
## Step 1. Set up (once, in a terminal)
You need Node.js and Claude Code installed. Then:
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev
Leave that terminal open. Remotion Studio opens in your browser.
Optional: Remotion also ships an official Claude Code plugin, see remotion.dev/docs/ai/claude-code-plugin
## Step 2. Start Claude Code in a second terminal
cd my-video
claude
## Step 3. Paste this first prompt
Make a 10 second, 1920x1080, 30 fps composition called TitleCard.
Beats:
1. Frames 0 to 20: a thin line draws from left to right in the center.
2. Frames 15 to 40: the title "YOUR TITLE HERE" rises 30 px into place and fades in, with a spring, no bounce.
3. Frames 40 to 70: a subtitle "Your subtitle" fades in under it.
4. Frames 70 to 270: hold, with a very slow 2% scale up on everything.
5. Frames 270 to 300: everything fades out together.
Use a warm off white background, near black text and one accent color.
Make the title, subtitle, colors and durations props with defaults so I can edit them in Studio.
Before writing code, list the beats back to me with frame numbers.
## Step 4. Iterate in small steps
Good follow ups, one at a time:
- "The title feels slow. Make the rise take 14 frames instead."
- "Add a 9:16 version called TitleCardVertical that reuses the same component."
- "Swap the font for a free Google font that feels editorial, and load it properly."
## Step 5. Render
npx remotion render TitleCard out/title.mp4
Then drop the MP4 into Premiere, Resolve, Final Cut or CapCut like any other clip.
Before you run it Fill in anything in [brackets]. If it edits a project, use a duplicate and read the agent's plan before you say go
# 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;`
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
# Project: FFmpeg editing folder
I edit videos here with FFmpeg through you. Treat my footage like a client's footage.
## Folders
- `raw/` original files. READ ONLY. Never write, move, rename or delete anything in here.
- `work/` temporary files. You can create and delete files here.
- `out/` finished exports only.
- `logs/` one text file per job with the exact commands you ran.
## Rules
- Run `ffprobe` on every input before you build a command. Report resolution, fps, codec, duration and audio channels.
- Keep the source fps and resolution unless I ask for something else.
- Prefer stream copy (`-c copy`) for simple trims on keyframes. Re-encode when cuts must be frame accurate and say so.
# Project: editing through an MCP server
You control my editing app through an MCP server. The app is open on my screen and I can see every change.
## Safety first
- I always work on a duplicate project or a duplicated timeline. At the start of each session, ask me to confirm the name of the timeline or comp you may edit. Touch nothing else.
- Read before you write. Start with the read only tools (list projects, list timelines or comps, list clips, get markers) and summarize what you see.
- Never delete media, bins, timelines or comps. If something should go, move it to a bin or folder called `_to_delete` and tell me.
- If a tool can run raw scripts (ExtendScript, Python, JavaScript), show me the script and explain it in plain words before running it.
- Never start a render or export unless I ask for it in this session.
## How to work
1. Restate the task as a numbered plan with the exact tools you will call.
2. Do the first step only, then tell me what changed and where to look (timeline name, timecode, track).
---
name: cut-silences
description: Find pauses and dead air in a talking head video with ffmpeg silencedetect, propose a cut list, and export a tightened version. Use when the user asks to cut silences, tighten a take, or make a jump cut edit.
argument-hint: <video file> [min pause in seconds, default 0.6]
---
# Cut silences
Input: $ARGUMENTS
1. Run `ffprobe` on the file and report duration, fps and audio channels.
2. Detect silence on the first audio stream:
`ffmpeg -hide_banner -i INPUT -map 0:a:0 -af silencedetect=noise=-35dB:d=MIN_PAUSE -f null - 2> work/silence.txt`
If no audio stream exists, stop and tell the user.
---
name: captions
description: Transcribe a video locally with Whisper, build clean SRT captions with readable line lengths, and optionally burn them in. Use when the user asks for captions, subtitles, an SRT or burned in text.
argument-hint: <video file> [burn] [language]
---
# Captions
Input: $ARGUMENTS
1. Extract audio: `ffmpeg -i INPUT -vn -ac 1 -ar 16000 work/audio.wav`
2. Transcribe with word timestamps (ask which Whisper the user has installed if unsure):
`whisper work/audio.wav --model small --word_timestamps True --output_format json --output_dir work`
3. Build captions from the word timings:
---
name: shorts
description: Find the strongest self contained moments in a long video from its transcript and export vertical 9:16 clips for review. Use when the user asks for shorts, reels, TikToks or clips from a long video.
argument-hint: <video file> [number of clips, default 5] [max seconds, default 45]
---
# Shorts from a long video
Input: $ARGUMENTS
1. Transcribe with word timestamps (see the captions skill) into `work/transcript.json`. Read only the transcript, do not try to watch the video.
2. Find candidate moments that:
- make sense with no context from earlier in the video
- open with a strong first sentence (a claim, a question, a number or a surprise) inside the first 2 seconds