Remotion Video Production

Programmable video production skill using Remotion. Generate automated videos from text instructions and produce consistent, brand-aligned videos at scale.

When to use this skill

• Automated video generation: Generate videos from text instructions

• Brand video production: High-volume videos with consistent style

• Programmable content: Combine narration, visuals, and animation

• Marketing content: Product intros, onboarding, promo videos

Instructions

Step 1: Define the Video Spec

video_spec: audience: [target audience] goal: [video objective] duration: [total length - 30s, 60s, 90s] aspect_ratio: "16:9" | "1:1" | "9:16" tone: "fast" | "calm" | "cinematic" voice: style: [narration style] language: [language]

Step 2: Outline Scenes

Scene structuring template:

Scene Plan

Scene 1: Hook (0:00 - 0:05)

• Visual: Product logo fade-in
• Audio: Upbeat intro
• Text: "Transform Your Workflow"
• Transition: Fade → Scene 2

Scene 2: Problem (0:05 - 0:15)

• Visual: Problem-state illustration
• Audio: Narration starts
• Text: Key message overlay
• Transition: Slide left

Scene 3: Solution (0:15 - 0:30)

...

Step 3: Prepare Assets

Asset checklist

assets/ ├── logos/ │ ├── logo-main.svg │ └── logo-white.svg ├── screenshots/ │ ├── dashboard.png │ └── feature-1.png ├── audio/ │ ├── bgm.mp3 │ └── narration.mp3 └── fonts/ └── brand-font.woff2

Asset prep rules:

• Logo: SVG or high-resolution PNG

• Screenshots: Normalize to the target aspect ratio

• Audio: MP3 or WAV; normalize volume

• Fonts: Webfont or local font files

Step 4: Implement Remotion Composition

// src/Video.tsx import { Composition } from 'remotion'; import { IntroScene } from './scenes/IntroScene'; import { ProblemScene } from './scenes/ProblemScene'; import { SolutionScene } from './scenes/SolutionScene'; import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => { return ( <> <Composition id="ProductIntro" component={ProductIntro} durationInFrames={1800} // 60s at 30fps fps={30} width={1920} height={1080} /> </> ); };

// Scene Component Example const IntroScene: React.FC<{ frame: number }> = ({ frame }) => { const opacity = interpolate(frame, [0, 30], [0, 1]);

return ( <AbsoluteFill style={{ opacity }}> <Logo /> <Title>Transform Your Workflow</Title> </AbsoluteFill> ); };

Step 5: Render and QA

1. Preview render (low quality)

npx remotion preview src/Video.tsx

2. QA checks

• Timing
• Audio sync
• Text readability
• Smooth transitions

3. Final render

npx remotion render src/Video.tsx ProductIntro out/video.mp4

Examples

Example 1: Product Intro Video

Prompt:

Create a 60s product intro video with 6 scenes, upbeat tone, and 16:9 output. Include a CTA at the end.

Expected output:

Scene Breakdown

1. Hook (0:00-0:05): Logo + tagline
2. Problem (0:05-0:15): Pain point visualization
3. Solution (0:15-0:30): Product demo
4. Features (0:30-0:45): Key benefits (3 items)
5. Social Proof (0:45-0:55): Testimonial/stats
6. CTA (0:55-1:00): Call to action + contact

Remotion Structure

• src/scenes/HookScene.tsx
• src/scenes/ProblemScene.tsx
• src/scenes/SolutionScene.tsx
• src/scenes/FeaturesScene.tsx
• src/scenes/SocialProofScene.tsx
• src/scenes/CTAScene.tsx

Example 2: Onboarding Walkthrough

Prompt:

Generate a 45s onboarding walkthrough using screenshots, with callouts and 9:16 format for mobile.

Expected output:

• Scene plan with 5 steps

• Asset list (screenshots, callout arrows)

• Text overlays and transitions

• Mobile-safe margins applied

Best practices

• Short scenes: Keep each scene clear at 5-10 seconds

• Consistent typography: Define a typography scale

• Audio sync: Align narration cues with visuals

• Template reuse: Save reusable compositions

• Safe zones: Reserve margins for mobile aspect ratios

Common pitfalls

• Text overload: Limit the amount of text per scene

• Ignoring mobile safe zones: Check edges for 9:16 outputs

• Final render before QA: Always verify in preview first

Troubleshooting

Issue: Audio and visuals out of sync

Cause: Frame timing mismatch Solution: Recalculate frames and align timestamps

Issue: Render is slow or fails

Cause: Heavy assets or effects Solution: Compress assets and simplify animations

Issue: Text unreadable

Cause: Font size too small or insufficient contrast Solution: Use at least 24px fonts and high-contrast colors

Output format

Video Production Report

Spec

• Duration: 60s
• Aspect Ratio: 16:9
• FPS: 30

Scene Plan

Assets

• logo.svg
• screenshots (3)
• bgm.mp3
• narration.mp3

Render Checklist

• Preview QA passed
• Audio sync verified
• Safe zones checked
• Final render complete

Multi-Agent Workflow

Validation & Retrospectives

• Round 1 (Orchestrator): Spec completeness, scene coverage

• Round 2 (Analyst): Narrative consistency, pacing review

• Round 3 (Executor): Validate render-readiness checklist

Agent Roles

Agent Role

Claude Scene planning, script writing

Gemini Asset analysis, optimization suggestions

Codex Generate Remotion code, run renders

Metadata

Version

• Current Version: 1.0.0

• Last Updated: 2026-01-21

• Compatible Platforms: Claude, ChatGPT, Gemini, Codex

Related Skills

• image-generation

• presentation-builder

• frontend-design

Tags

#video #remotion #animation #storytelling #automation #react