video-production

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Video Production

Remotion 视频制作

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

基于Remotion实现的可编程视频制作技能，可根据文本指令自动生成视频，大规模产出风格统一、符合品牌调性的内容。

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

步骤1：定义视频规范

yaml

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]

yaml

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

步骤2：梳理场景大纲

Scene structuring template:

markdown

undefined

场景结构模板：

markdown

undefined

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

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

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

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

...

undefined

...

undefined

Step 3: Prepare Assets

步骤3：准备素材

bash

undefined

bash

undefined

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

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


**素材准备规则**:
- Logo：SVG格式或高分辨率PNG
- 截图：适配目标长宽比
- 音频：MP3或WAV格式，统一音量
- 字体：网页字体或本地字体文件

Step 4: Implement Remotion Composition

步骤4：实现Remotion合成组件

tsx

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

tsx

// 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

步骤5：渲染和质量校验

bash

undefined

bash

undefined

1. Preview render (low quality)

npx remotion preview src/Video.tsx

2. QA checks

3. Final render

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

---

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

---

Examples

示例

Example 1: Product Intro Video

示例1：产品介绍视频

Prompt:

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

Expected output:

markdown

undefined

Prompt:

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

预期输出:

markdown

undefined

Scene Breakdown

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

Hook (0:00-0:05): Logo + tagline
Problem (0:05-0:15): Pain point visualization
Solution (0:15-0:30): Product demo
Features (0:30-0:45): Key benefits (3 items)
Social Proof (0:45-0:55): Testimonial/stats
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

undefined

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

undefined

Example 2: Onboarding Walkthrough

示例2：新用户引导教程视频

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

Prompt:

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

预期输出:

包含5个步骤的场景规划
素材清单（截图、标注箭头）
文字覆盖层和过渡效果
适配移动端的安全边距设置

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

场景简短：每个场景控制在5-10秒，内容清晰
排版统一：定义统一的字体大小层级
音画同步：旁白提示点和视觉内容对齐
模板复用：留存可复用的合成组件
安全区域：为移动端长宽比预留边距

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

文本过载：每个场景的文字数量不宜过多
忽略移动端安全区域：输出9:16比例的视频时要检查边缘内容
QA前直接渲染最终版本：务必先通过预览验证内容

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

原因：字体过小或对比度不足 解决方案：使用不小于24px的字体，选择高对比度配色

Output format

输出格式

markdown

undefined

markdown

undefined