Remotion 将 React 组件转化为渲染好的视频文件。你用 JSX 编写场景，定义合成参数，然后从命令行导出 MP4。Remotion 技能在 skills.sh 上拥有 126,000+ 安装量，是全球排名第 4 的代理技能，也是编程化视频领域安装量最高的技能。本指南介绍该技能的核心能力、如何在 Claude Code 或 Codex CLI 中使用，以及编程化视频适用的场景。
枢纽文章：本文为深度分支文章。如需所有视频制作技能的概览，请阅读2026 最佳视频制作代理技能。
你能构建什么
安装 Remotion 技能后，AI 代理可以生成以下类型的视频代码：
- 产品演示 - 带动画截图、功能标注和品牌转场
- 数据可视化 - 由 JSON 或 API 数据驱动，渲染为视频
- 社交媒体短片 - 适配 Shorts、Reels 和 TikTok，含文字叠加和字幕
- 动画讲解 - 动态图形、分步揭示和图表
- 营销视频 - 一致的品牌色、字体和 Logo 布局
- 品牌片头/片尾 - 可复用于整个系列的每个视频
什么是 Remotion 技能？
Remotion 是一个开源 React 框架，用于以编程方式创建视频。你将视频场景定义为 React 组件，用帧号控制时序，输出 MP4、WebM 或 GIF。
Remotion 代理技能包含 28 条模块化规则文件，教 AI 编码代理如何编写正确的 Remotion 代码，涵盖：
- 9 种内置组件模式（序列、系列、静态图片、音频、视频、形状、文本、IFrame、动画 GIF）
- 7 种转场类型（淡入淡出、滑动、擦除、翻转、时钟擦除、自定义）
- 动画原语（弹簧物理、插值、基于帧的关键帧）
- 音频集成（背景音乐、配音时序、音量控制）
- 从音频文件生成字幕
- Three.js 3D 渲染集成
- 部署和渲染配置（Lambda、Cloud Run、本地 CLI）
一行命令安装：
npx skills add remotion支持 Claude Code、Codex CLI 和 Cursor。
核心能力
动画与运动
技能教代理使用 spring() 和 interpolate() 实现基于物理的平滑运动。覆盖的模式：挂载时淡入、从屏幕外滑入、从零放大、列表交错入场和退出动画。
字幕与文本
通过 @remotion/install-whisper-cpp 从音频生成字幕。支持词级时间戳提取、动画字幕叠加、自定义字体样式、逐字或逐词标题显示。
音频集成
覆盖的模式包括：视觉转场同步音频节拍、多音频源叠加（配音 + 背景音乐 + 音效）、逐轨音量控制、场景边界淡入淡出。
转场与效果
7 种内置转场：Fade（交叉溶解）、Slide（推入）、Wipe（方向揭示）、Flip（3D 翻转）、Clock wipe（圆形扫描）、Custom spring（物理入场）、None（硬切）。代理会用 <TransitionSeries> 组件包装场景并配置时序。
Remotion 与传统视频剪辑对比
| 特性 | Remotion | Premiere/DaVinci | CapCut |
|---|---|---|---|
| 可重复性 | 确定性，每次结果相同 | 手动，因人而异 | 模板化，有限 |
| 版本控制 | 完整 Git 历史 | 差异不可读 | 无 |
| 批量生成 | 数据驱动 100+ 变体 | 手动逐个 | 有限批处理 |
| 学习曲线 | React + TS | 时间线编辑 | 低 |
| 成本 | 免费开源 | $20-55/月 | 免费 + 付费 |
何时用 Remotion，何时用 AI 视频生成器
Remotion 和 AI 视频生成器（Seedance、Kling、Sora）解决不同的问题。
使用 Remotion：
- 需要同一视频结构的数十或数百个变体（本地化版本、数据驱动内容、A/B 测试变体）
- 品牌一致性要求每一帧都符合设计系统
- 视频内容由数据驱动（仪表盘、报告、指标）
- 需要完整的版本控制和 CI/CD
使用 AI 生成器：
- 需要无法用代码实现的有机、写实或艺术化视觉效果
- 视频是一次性的创意作品，不是模板
- 希望从文本提示直接到成品片段
- 运动和物理效果需要自然而非编程化的观感
两者结合： 最强的工作流是用 AI 生成器制作 B-roll 素材和创意片段，再用 Remotion 进行组装、品牌化、文字叠加、转场和最终合成。用 Seedance 或 Kling 生成视觉素材，然后作为源媒体导入 Remotion 项目。
相关阅读：了解完整的 AI 视频流水线，请参阅 AI 视频流水线完整指南，或探索 ffmpeg-editing 技能进行快速片段处理。
最佳实践
- 保持合成模块化。 每个场景一个组件，代理生成的代码更清晰。
- 使用
staticFile()。 通过 Remotion 静态文件系统引用资产，避免相对路径。 - 统一配置 FPS 和分辨率。 在合成级别定义，全局引用。
- 用 Remotion Studio 预览。 运行
npx remotion studio实时检查效果。 - 缓存渲染结果。 帧缓存加速重新渲染，CI/CD 中避免重复渲染未变更帧。
- 版本控制视频项目。 Remotion 项目是代码，提交到 Git 追踪变更。
常见问题
什么是 Remotion 代理技能？
Remotion 代理技能是一组 28 条模块化规则文件，教 AI 编码代理（Claude Code、Codex CLI、Cursor）如何编写正确的 Remotion 代码。涵盖动画、音频、字幕、转场、3D 渲染和部署。使用 npx skills add remotion 安装。
需要 React 经验吗？
基础 React 和 TypeScript 知识有助于理解生成代码。代理技能会处理大部分 Remotion 特有模式，能读懂 JSX 即可。
Remotion 和 FFmpeg 有什么区别？
Remotion 从零创建视频，FFmpeg 处理已有视频文件。两者互补。ffmpeg-editing 技能与 Remotion 搭配良好。
Remotion 能在云端渲染吗？
支持。通过 Remotion Lambda（AWS）和 Cloud Run（GCP）实现无服务器渲染。
Remotion 免费吗？
个人和 3 人以下公司免费。3 人以上需要 Remotion 许可证。代理技能本身免费。
能用 AI 生成的视频片段吗？
可以。用 Seedance 或 Kling 生成片段，作为 <Video> 源导入 Remotion 合成，代理自动处理时序。
相关文章
- 2026 最佳视频制作代理技能 - 顶级视频制作技能概览（枢纽）
- 2026 最佳 YouTube 创作者代理技能 - YouTube 专属技能推荐
- AI 代理技能视频自动化指南 - SKILL.md 教程与自动化指南
- AI 视频流水线完整指南 - 端到端流水线详解
- 2026 最佳 AI 视频工具 - 全流水线工具对比
- 2026 最佳 AI 视频放大工具 - 放大与后处理工具
- FFmpeg 编辑技能 - 片段处理与转码
- 视频工具包技能 - 通用视频工具
收藏 AIVidPipeline 获取最新的 AI 视频制作工具、代理技能和编程化视频工作流资讯。
