remotion-production

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Production Workflow

Remotion视频制作工作流

This skill teaches how to produce complete videos with Remotion by orchestrating multiple MCP tools together. It covers the full pipeline from concept to rendered MP4.

本技能讲解如何通过整合多款MCP工具，使用Remotion制作完整视频。内容覆盖从概念构思到渲染出MP4文件的全流程。

Available MCP Tools

可用的MCP工具

You have access to these MCP servers for media production:

你可以访问以下用于媒体制作的MCP服务器：

remotion-media (via KIE)

remotion-media（通过KIE）

```
generate_tts
```
— Text-to-speech voiceovers (ElevenLabs TTS)
```
generate_music
```
— Background music (Suno V3.5–V5)
```
generate_sfx
```
— Sound effects (ElevenLabs SFX V2)
```
generate_image
```
— AI images (Nano Banana Pro)
```
generate_video
```
— AI video clips (Veo 3.1)
```
generate_subtitles
```
— Transcribe audio/video to SRT (Whisper)
```
list_assets
```
— List all generated media in the project

```
generate_tts
```
— 文本转语音旁白（ElevenLabs TTS）
```
generate_music
```
— 背景音乐生成（Suno V3.5–V5）
```
generate_sfx
```
— 音效生成（ElevenLabs SFX V2）
```
generate_image
```
— AI图像生成（Nano Banana Pro）
```
generate_video
```
— AI视频片段生成（Veo 3.1）
```
generate_subtitles
```
— 将音频/视频转录为SRT字幕（Whisper）
```
list_assets
```
— 列出项目中所有生成的媒体资源

TwelveLabs (video understanding)

TwelveLabs（视频理解）

Index and analyze video files
Semantic search within videos ("find the part where...")
Scene detection, object detection, speaker identification
Video summarization

索引并分析视频文件
视频内语义搜索（例如“找到...的片段”）
场景检测、物体检测、说话人识别
视频摘要生成

Pexels (stock footage)

Pexels（素材视频/图片）

```
searchPhotos
```
— Search free stock photos
```
searchVideos
```
— Search free stock videos
```
getVideo
```
/
```
getPhoto
```
— Get details by ID
```
downloadVideo
```
— Download video to project

```
searchPhotos
```
— 搜索免费素材图片
```
searchVideos
```
— 搜索免费素材视频
```
getVideo
```
/
```
getPhoto
```
— 通过ID获取资源详情
```
downloadVideo
```
— 将视频下载到项目中

ElevenLabs (optional — advanced voice)

ElevenLabs（可选——高级语音功能）

Voice cloning from audio samples
Advanced TTS with custom voices
Audio isolation and processing
Transcription

从音频样本克隆语音
支持自定义语音的高级TTS
音频分离与处理
转录功能

Replicate (optional — 100+ AI models)

Replicate（可选——100+ AI模型）

```
replicate_run
```
— Run a model synchronously (images)
```
replicate_create_prediction
```
— Start async prediction (video)
```
replicate_get_prediction
```
— Poll prediction status
Image models: FLUX 1.1 Pro, Imagen 4, Ideogram v3, FLUX Kontext
Video models: Wan 2.5 (T2V, I2V), Kling 2.6 Pro

```
replicate_run
```
— 同步运行模型（图像类）
```
replicate_create_prediction
```
— 启动异步预测（视频类）
```
replicate_get_prediction
```
— 查询预测状态
图像模型：FLUX 1.1 Pro、Imagen 4、Ideogram v3、FLUX Kontext
视频模型：Wan 2.5（文本转视频、图像转视频）、Kling 2.6 Pro

Production Pipeline

制作流程

Read individual rule files for detailed workflows:

```
rules/production-pipeline.md
```
— End-to-end workflow from concept to final render
```
rules/audio-integration.md
```
— How to integrate generated audio into Remotion compositions
```
rules/voiceover-sync.md
```
— Syncing TTS voiceovers with animations and captions
```
rules/music-scoring.md
```
— Generating and timing background music
```
rules/stock-footage-workflow.md
```
— Searching, downloading, and using stock footage in Remotion
```
rules/video-analysis.md
```
— Using TwelveLabs to analyze and select clips from existing footage
```
rules/captions-workflow.md
```
— TikTok-style animated captions using @remotion/captions and Whisper
```
rules/animation-presets.md
```
— Reusable animation patterns (fade, slide, scale, typewriter, stagger)
```
rules/3d-content.md
```
— Three.js and React Three Fiber via @remotion/three
```
rules/data-visualization.md
```
— Animated charts, dashboards, and number counters
```
rules/visual-effects.md
```
— Light leaks, Lottie, film grain, vignettes, Ken Burns
```
rules/ci-rendering.md
```
— GitHub Actions workflows for automated video rendering
```
rules/replicate-models.md
```
— Replicate MCP model catalog, usage, and decision guide
```
rules/image-generation.md
```
— AI image prompt engineering, provider selection, Remotion integration
```
rules/video-generation.md
```
— AI video clip generation, I2V pipeline, sequencing in Remotion
```
rules/sound-effects.md
```
— SFX generation, prompt engineering, timing to visual events
```
rules/elevenlabs-advanced.md
```
— Voice cloning, custom TTS parameters, multi-voice scripts
```
rules/asset-management.md
```
— File organization, naming conventions, staticFile() reference

请阅读单独的规则文件获取详细工作流：

```
rules/production-pipeline.md
```
— 从概念到最终渲染的端到端工作流
```
rules/audio-integration.md
```
— 如何将生成的音频整合到Remotion合成内容中
```
rules/voiceover-sync.md
```
— 将TTS旁白与动画和字幕同步
```
rules/music-scoring.md
```
— 背景音乐生成与时间匹配
```
rules/stock-footage-workflow.md
```
— 在Remotion中搜索、下载并使用素材视频
```
rules/video-analysis.md
```
— 使用TwelveLabs分析并从现有素材中选择片段
```
rules/captions-workflow.md
```
— 使用@remotion/captions和Whisper制作TikTok风格的动画字幕
```
rules/animation-presets.md
```
— 可复用的动画模板（淡入淡出、滑动、缩放、打字机效果、stagger效果）
```
rules/3d-content.md
```
— 通过@remotion/three使用Three.js和React Three Fiber
```
rules/data-visualization.md
```
— 动画图表、仪表盘和数字计数器
```
rules/visual-effects.md
```
— 漏光、Lottie、胶片颗粒、暗角、Ken Burns效果
```
rules/ci-rendering.md
```
— 用于自动化视频渲染的GitHub Actions工作流
```
rules/replicate-models.md
```
— Replicate MCP模型目录、使用方法和决策指南
```
rules/image-generation.md
```
— AI图像提示词工程、供应商选择、Remotion整合
```
rules/video-generation.md
```
— AI视频片段生成、图像转视频流程、在Remotion中排序
```
rules/sound-effects.md
```
— 音效生成、提示词工程、与视觉事件同步
```
rules/elevenlabs-advanced.md
```
— 语音克隆、自定义TTS参数、多语音脚本
```
rules/asset-management.md
```
— 文件组织、命名规范、staticFile()引用方法

Key Principles

核心原则

Audio drives timing — Generate voiceover first, get its duration, then set composition length to match.
Assets go in
public/
— All generated media files (audio, video, images) must be saved to the project's
```
public/
```
directory so Remotion can access them via
```
staticFile()
```
.
Use Remotion's audio components — Always use
```
<Audio>
```
component with
```
staticFile()
```
for audio. Never use HTML
```
<audio>
```
tags.
Frame-based timing — Remotion uses frames, not seconds. Convert with
```
fps * seconds
```
. At 30fps, 1 second = 30 frames.
Progressive composition — Build the video in layers: visuals first, then voiceover, then music, then SFX.
Preview frequently — Use
```
npm run dev
```
to preview after each major change. The Remotion player updates live.

音频驱动时间轴 — 先生成旁白，获取其时长，再将合成内容长度设置为与之匹配。
资源存入
public/
目录 — 所有生成的媒体文件（音频、视频、图像）必须保存到项目的
```
public/
```
目录，以便Remotion通过
```
staticFile()
```
访问。
使用Remotion的音频组件 — 始终使用结合
```
staticFile()
```
的
```
<Audio>
```
组件处理音频，切勿使用HTML
```
<audio>
```
标签。
基于帧的时间计算 — Remotion使用帧而非秒来计算时间。转换公式为
```
fps * seconds
```
。在30fps下，1秒=30帧。
分层渐进式合成 — 分层构建视频：先制作视觉内容，再添加旁白，然后是背景音乐，最后是音效。
频繁预览 — 每次重大修改后使用
```
npm run dev
```
预览。Remotion播放器会实时更新。