Vibe Motion
用代码逐帧驱动动画/视频生成的工程化方法论——不是”一句话生成视频”，而是把视频制作变成可调试、可验证、可复用的软件工程流程
简介
Vibe Motion 是 Vibe Coding 之后延伸出的新概念，指用代码驱动动画和视频的生成。它常被误解为”用 AI（如 Seedance、可灵等生成模型）直接生成视频”，但实际完全不同：Vibe Motion 的底层逻辑是把网页代码逐帧截图，再用 FFmpeg 拼接编码成 MP4。
这个方向目前最火的两个开源框架是 Remotion（2021 年，用 React 组件/JSX+CSS 描述视频每一帧）和 HyperFrames（2026 年 4 月开源，用原生 HTML+CSS+GSAP 动画）。两者写法不同，但底层思路一脉相承——都通过无头浏览器逐帧捕获画面，再交给 FFmpeg 编码。
与传统剪辑”哪里不对靠感觉改”相比，代码做视频最大的区别是：哪里不对能定位到具体的时间码、图层和坐标。因此 Vibe Motion 的本质是把视频制作变成一套工程流程：可调试、可验证、可复用。这个词听着很”vibe”，做起来其实很工程。
关键信息
- 类型：方法论 / 概念
- 领域：AI 视频制作 / 动态视觉内容
- 核心框架：Remotion（React 全合成）、HyperFrames（HTML 叠加层）
- 底层技术：无头浏览器逐帧截图 + FFmpeg 编码
- 提出背景：Andrej Karpathy 定义 Vibe Coding 后，Vibe 系列范式（Writing/Design/Marketing）向动态视觉的自然延伸
- 相关概念：Vibe Coding、Remotion、HyperFrames、Codex、Claude Code
核心特性
- 代码逐帧驱动，非生成模型直出：与 AIGC 视频生成模型（Seedance、可灵）路线完全不同。所有画面由代码绘制，AI 拥有对每一帧的精确控制权（全合成场景）。
- 工程化的三个属性——可调试、可验证、可复用：问题能定位到时间码/图层/坐标；预览、抽帧、inspect 报告作为中间证据，最终 MP4 才是事实；每条片沉淀的动效模版可跨项目复用。
- 两条生产线由输入形态决定：
- 全合成动画（只有文字和想法）→ Claude Code + Remotion：从零生成一切，AI 完全控制画面。
- 真人口播视频（有真人实拍素材）→ Codex + HyperFrames：围绕已有真人时间轴搭建透明图文叠加层。
- 文档前置约束 Agent：先有 DESIGN.md（锁视觉系统）和 STORYBOARD（锁分镜），再写代码，Agent 不允许自由发挥——“做视频和做产品一样，先有规范，再有实现”。
- 复利效应：每条片产出一批可复用的动效模版资产，做得越多后面越快。
Vibe 系列与感官覆盖路径
作者提出一个值得认真思考的观察：从 Vibe Coding 到 Vibe Motion，AI 正沿着人类感知信息的顺序逐步覆盖不同感官通道：
| 阶段 | 对象 | 难点 |
|---|---|---|
| Vibe Coding | 代码 | 验收标准客观（能跑就行），反馈明确易迭代 |
| Vibe Writing | 文字 | 拟人感（早期一股机器味） |
| Vibe Design | 设计 | 审美主观，要理解”人觉得什么好看” |
| Vibe Motion | 动态视觉 | 多了时序维度——节奏感、信息密度、画面编排、对的时间出现对的东西 |
路径是”语义理解 → 逻辑执行 → 审美判断 → 时序编排”，每往前一步 AI 需要理解的东西都在叠加。佐证信号：Figma 在 Config2026 发布 Figma Motion，把动画时间线内置进设计画布，并支持 MCP 模型上下文协议，动画帧可直传给 AI 编码 Agent 实现——连设计巨头都开始把 Motion 当一等公民。
不同素材中的观点
- 2026-07-01-woshipm-vibe-motion-10-pitfalls（作者 @小普）：实测两周、踩了 10 个坑后的复盘。最核心结论是”输入形态决定生产线”——用排除法系统验证四种组合后得出：只有文字想法走 Claude Code + Remotion（全合成动画，代表作 Loop Engineer，零外部素材沉淀 5 个动效模版），有真人口播素材走 Codex + HyperFrames（图文叠加，代表作《创始人手册》3 分钟口播，迭代 5 版）。核心心法：每次踩坑都沉淀为下一条视频的强制检查规则（FULL/PIP/NO_HUMAN 显式标注、按时间码逐个触发元素、最终 MP4 才是事实）。作者强调”AI 做视频不会自动有审美，但能在你给了明确标准的情况下快速返工——真正重要的是你能不能把审美反馈翻译成可执行的检查项”。
实用信息
- 选型决策（最重要）：
- 手里只有文字和想法 → Claude Code + Remotion（全合成动画）
- 手里有真人实拍口播素材 → Codex + HyperFrames（真人视频 + 透明图文叠加层）
- 两个必备文档：
DESIGN.md：进代码前锁死色板、字体、容器样式、动效规范、转场方式STORYBOARD：锁分镜，每段显式标注全屏真人 / PIP 小窗 / 无真人
- 口播视频架构避坑：动态背景视频不要嵌进 HyperFrames（逐帧 seek 会冻帧），HF 只做透明图文层，真背景交给 FFmpeg 后期合成。
- 验收铁律：预览没问题不代表成片没问题，渲染出的 MP4 才是验收对象。
- 适用场景：AI 产品概念解释动画、技术概念视频、真人口播 + 图文卡/截图/PIP 的知识类短视频、需要数据驱动批量产出的同风格系列视频。
- 注意事项：Multi-Agent 拆任务做视频会因上下文不共享而失败，用单 Agent + 文档约束；给 Codex 的素材要声明”优先直接引用原文件、未确认不重绘”，防止它自作主张把 logo 重画成 SVG。