remotion-best-practices

When to use

Use this skill for the complete video production pipeline — from script writing through rendering and delivery. It includes scaffolding automation, voiceover/caption/music generation scripts, and detailed rule files for every Remotion pattern you'll need.

Prerequisites

You need a Remotion project. If you don't have one, create it with npx create-video@latest and select the blank template. The project must have a remotion.config.ts at its root — the scaffold script uses this to locate the project.

Required .env variables in the project root:

• ELEVENLABS_API_KEY — for voiceover and background music generation
• ELEVENLABS_VOICE_ID — default voice (optional if set per-project in project.json)
• KREA_API_KEY — for b-roll generation (if using Krea)

On first use, save the Remotion project location to memory so you can find it in future sessions.

Scene planning

Before implementing any scenes, follow this sequence.

API keys (ElevenLabs, Krea, etc.) are loaded from .env by the scripts automatically. NEVER pass API keys on the command line — they will be visible in terminal output. Always use the provided scripts:

• npx tsx src/<Name>/generate-voiceover.ts — generates voiceover audio (reads scenes from project.json)
• npx tsx src/<Name>/generate-captions.ts — transcribes voiceover to captions (reads scene IDs from project.json)
• npx tsx src/<Name>/generate-background-music.ts — generates background music (reads mood from project.json)
• npx tsx src/generate-broll.ts --output "public/<name>/broll/" --prompts prompts.json — generates b-roll clips

Content safe zone (default)

All main content (headlines, key text, CTAs, stats, graphics) must be centered vertically and horizontally, building outward from dead center. This is the default unless explicitly overridden.

B-roll, backgrounds, decorative elements, and captions are NOT restricted to the safe zone — they fill the full frame.

If the prompt doesn't specify landscape, default to portrait (9:16).