素材准备规则：

• Logo：SVG 或高分辨率 PNG
• 截图：统一为目标宽高比
• 音频：MP3 或 WAV；统一音量
• 字体：Web 字体或本地字体文件

步骤 4：实现 Remotion 合成

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

// 场景组件示例
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>
  );
};

步骤 5：渲染与质量保证

# 1. 预览渲染（低质量）
npx remotion preview src/Video.tsx

# 2. 质量保证检查
- [ ] 时间点
- [ ] 音频同步
- [ ] 文本可读性
- [ ] 转场流畅度

# 3. 最终渲染
npx remotion render src/Video.tsx ProductIntro out/video.mp4

示例

示例 1：产品介绍视频

提示：

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

预期输出：

## 场景分解
1. 开场钩子 (0:00-0:05): 标志 + 标语
2. 问题呈现 (0:05-0:15): 痛点可视化
3. 解决方案 (0:15-0:30): 产品演示
4. 功能特性 (0:30-0:45): 关键优势（3项）
5. 社会认同 (0:45-0:55): 用户评价/数据
6. 行动号召 (0:55-1:00): 呼吁行动 + 联系方式

## Remotion 结构
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

示例 2：入门引导视频

提示：

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

预期输出：

• 包含 5 个步骤的场景规划
• 素材清单（截图、标注箭头）
• 文本叠加和转场效果
• 已应用移动端安全边距

最佳实践

1. 简短场景：保持每个场景清晰，时长 5-10 秒
2. 一致的排版：定义排版比例
3. 音频同步：对齐旁白提示与视觉效果
4. 模板复用：保存可复用的合成组件
5. 安全区域：为移动端宽高比预留边距

常见问题

• 文本过载：限制每个场景的文本量
• 忽略移动端安全区域：检查 9:16 输出的边缘部分
• 未进行质量保证即最终渲染：始终先在预览中验证

故障排除

问题：音频与视觉不同步

原因：帧时间不匹配 解决方案：重新计算帧数并调整时间戳

问题：渲染缓慢或失败

原因：素材过大或效果复杂 解决方案：压缩素材并简化动画

问题：文本不可读

原因：字体过小或对比度不足 解决方案：使用至少 24px 的字体和高对比度颜色

输出格式

## 视频制作报告

### 规格
- 时长: 60s
- 宽高比: 16:9
- 帧率: 30

### 场景规划
| 场景 | 时长 | 视觉 | 音频 | 转场 |
|-------|----------|--------|-------|------------|
| 开场钩子 | 0:00-0:05 | 标志淡入 | 背景音乐开始 | 淡入 |
| ... | ... | ... | ... | ... |

### 素材
- [ ] logo.svg
- [ ] 截图 (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### 渲染检查清单
- [ ] 预览质量保证通过
- [ ] 音频同步已验证
- [ ] 安全区域已检查
- [ ] 最终渲染完成

多智能体工作流

验证与回顾

• 第 1 轮（协调者）：规格完整性，场景覆盖度
• 第 2 轮（分析师）：叙事一致性，节奏审查
• 第 3 轮（执行者）：验证渲染就绪检查清单

智能体角色

元数据

版本

• 当前版本 : 1.0.0
• 最后更新 : 2026-01-21
• 兼容平台 : Claude, ChatGPT, Gemini, Codex

相关技能

• image-generation
• presentation-builder
• frontend-design

标签

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

每周安装量

1

代码仓库

akillness/oh-my-gods

首次出现

1 天前

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

mcpjam1

claude-code1

replit1

junie1

windsurf1

zencoder1

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

1. Short scenes : Keep each scene clear at 5-10 seconds
2. Consistent typography : Define a typography scale
3. Audio sync : Align narration cues with visuals
4. Template reuse : Save reusable compositions
5. 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
| 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) : Validate render-readiness checklist

Agent Roles

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

Weekly Installs

1

Repository

akillness/oh-my-gods

First Seen

1 day ago

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

mcpjam1

claude-code1

replit1

junie1

windsurf1

zencoder1