# 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.