Remotion
用 React 组件描述视频每一帧的开源代码化视频框架，2021 年诞生，Vibe Motion 全合成动画路线的主力工具
简介
Remotion 是一个用 React 组件来描述视频每一帧的开源框架，2021 年就已出现，比 AI 编程热潮还早。你写的是 JSX 和 CSS，框架通过无头浏览器把网页代码逐帧截图，再用 FFmpeg 编码成 MP4。它是 Vibe Motion（代码驱动视频）方向最成熟的框架之一，另一个是 HyperFrames（走原生 HTML 路线）。
在 Vibe Motion 的两条生产线中，Remotion 对应全合成动画场景——所有画面都由代码从零绘制，适合只有文字和想法、不需要真人出镜的视频。
关键信息
- 类型：工具 / 框架
- 领域：代码化视频生成 / 动态视觉
- 诞生时间：2021 年（早于 AI 编程热潮）
- 技术栈：React（JSX + CSS）
- 底层机制：无头浏览器逐帧截图 + FFmpeg 编码
- 最佳搭档：Claude Code（全合成动画场景）
- 相关概念：Vibe Motion、HyperFrames、Claude Code
核心特性
- 组件化与复用（强项）：做过一个动效模版，下次同风格视频直接 import 进来改参数即可。做一条片等于产一批可复用资产。
- 参数化批量生成（强项）：因为是 React，能做数据驱动，一次批量生成 100 条不同内容的视频没问题。
- React 帧驱动渲染管线：视频以帧为单位由 React 组件渲染，全合成场景下这是优势，但真人实拍重剪场景下反而是负担——把真人视频塞进帧驱动管线，光让视频正常播放就很费劲。
- 真人素材混编不友好（短板）：要把真人口播和代码画面揉在一起会很别扭，这是它相对 HyperFrames 的主要短板。
不同素材中的观点
- 2026-07-01-woshipm-vibe-motion-10-pitfalls：作者第一个上手的组合就是 Claude Code + Remotion，用于做 AI 产品概念解释动画（PE 系列、Loop Engineer）。验证结论：全合成动画这条路 Claude Code + Remotion 完全跑通，Loop Engineer（GitHub Dark 配色、等宽字体、CRT 扫描线的终端赛博风，零外部素材）验证了这套组合的上限，并沉淀出 5 个可复用动效模版。但把全合成套路直接套口播完全失败——Remotion 的组件化优势在口播重剪场景变成负担。作者用排除法确认：Remotion 做口播不行（不管搭配 Claude Code 还是 Codex），口播场景要用 HyperFrames。
实用信息
- 适用场景：只有文字和想法的全合成动画、AI 产品/技术概念解释视频、需要数据驱动批量产出的同风格系列视频。
- 不适用场景：真人口播视频、需要在真人实拍素材上叠加图文层的重剪场景（改用 HyperFrames）。
- 推荐搭档：Claude Code（写 React 已经很顺，接入自然）。
- 工作流建议：先建 DESIGN.md 锁死视觉系统（色板、字体、动效规范），再让 Agent 严格按规范写组件，避免整片风格乱飞。