video-production

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>
  );
};