Remotion Video Production

A skill for producing programmable videos using Remotion. Generate automated videos from text instructions and produce brand-consistent videos at scale.

When to use this skill

• Automated video generation: Create videos from text instructions

• Brand video production: Consistent-style videos at scale

• Programmable content: Integrated narration, visuals, and animation

• Marketing content: Product introductions, onboarding, and promotional videos

Instructions

Step 1: Define the Video Spec

video_spec:

  audience: [target audience]

  goal: [video purpose]

  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 structure 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 scenario illustration

- **Audio**: Narration begins

- **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 preparation rules:

• Logos: SVG or high-resolution PNG

• Screenshots: Normalized to match aspect ratio

• Audio: MP3 or WAV, volume normalized

• Fonts: Web fonts 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 verification

- [ ] 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 scenes clear at 5-10 seconds each

• Consistent typography: Define a typography scale

• Audio sync: Align narration cues with visuals

• Template reuse: Save reusable compositions

• Safe zones: Ensure 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 aspect ratio

• Final render before QA: Always check 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: Insufficient font size or contrast

Solution: Use minimum 24px font and high-contrast colors

Output format

## Video Production Report

### Spec

- Duration: 60s

- Aspect Ratio: 16:9

- FPS: 30

### Scene Plan

| Scene | Duration | Visual | Audio | Transition |

|-------|----------|--------|-------|------------|

| Hook  | 0:00-0:05 | Logo fade | BGM start | Fade |

| ...   | ...      | ...    | ...   | ...  |

### 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): Render readiness checklist verification

Agent Roles

Agent

Role

Claude

Scene planning, script writing

Gemini

Asset analysis, optimization suggestions

Codex

Remotion code generation, render execution

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