我用 Codex + 开源 HyperFrames 做了一条 AI 猫咪视频开场剪辑
从一张图片生成猫咪视频素材，再用开源项目和 AI 编程助手完成一版更像 YouTube 科技教学视频的开场包装。
最近我做了一个小实验：不是直接用传统剪辑软件一帧一帧拖时间线，而是用Codex + 开源视频项目 HyperFrames + FFmpeg搭了一套可以迭代的视频剪辑工作流。
这条视频的素材很简单：先用一张猫咪图片生成一段猫咪动态视频。你也可以换成自己的素材，比如产品演示、人物口播、教程录屏、宠物视频、AI 生成视频片段等等。
下面是我用豆包生成地一个素材视频
我的目标不是做一个花哨模板，而是做一条更像高质量 YouTube 科技 / AI 教学视频开场的短视频：
- 保留原视频主体内容清晰
- 节奏更强，开头更抓人
- 加入屏幕大字、动作字幕、信息卡片和轻量转场
- 字幕根据猫咪动作出现，而不是一直呆板地放在底部
- 整体高级、干净、现代，不做廉价模板感
🧑💻 用到的开源工具
这次我主要用了这些工具：
1. HyperFrames
HyperFrames 是 HeyGen 开源的视频生成 / 视频合成项目，适合用前端方式来组织视频画面。它的思路有点像把视频当成一个网页来写：用 HTML、CSS、JavaScript 控制字幕、卡片、动画、节奏点，然后渲染成视频。
我这次用它来做视频上层包装，包括：
- 开头大标题
- 左上角科技感信息卡片
- 动态字幕
- 猫咪动作反应气泡
- 进度条
- 轻量动效
项目地址：
https://github.com/heygen-com/hyperframes
文档：
https://hyperframes.heygen.com/introduction
Quickstart：
https://hyperframes.heygen.com/quickstart
2. FFmpeg
FFmpeg 负责底层音视频处理。
这次我用它做了这些事情：
- 把原始视频统一处理成 1920x1080
- 固定帧率为 30fps
- 分离原视频音频
- 合成 HyperFrames 渲染出的透明包装层
- 混合轻量音效
- 最终导出 MP4
3. Codex
Codex 在这里不是单纯“写代码”，而是作为一个剪辑工作流助手：
- 帮我初始化项目
- 检查 Node.js、FFmpeg 等环境
- 根据视频目标设计第一版包装
- 调整字幕节奏
- 修改 HyperFrames 代码
- 反复 render 输出成片
- 检查画面尺寸、帧率、音轨和最终文件
换句话说，我把“剪辑思路”告诉 Codex，它帮我把这些思路变成可执行的视频工程。
🚀 整体制作流程
这次的视频工作流大概分成五步。
第一步：准备素材
我先用一张猫咪图片生成了一段动态猫咪视频素材。这个素材本身已经有主体画面：猫咪从静态姿态到动作变化。
如果你要复现这个流程，不一定要用猫咪。你可以自己上传一个视频，比如：
- AI 生成的视频
- 产品功能演示
- 教程录屏
- 口播片段
- 游戏片段
- 电商产品展示
只要你有一个原始视频，就可以继续后面的剪辑包装。
第二步：初始化 HyperFrames 项目
我按官方 Quickstart 初始化了一个 HyperFrames 工程：
ai-video-deit-demo然后把项目工作流固定成横板视频：
- 分辨率：1920 x 1080
- 帧率：30fps
- 输出格式：MP4
这样后续无论加字幕、卡片还是动效，都围绕一个稳定的视频规格来做。
第三步：处理原始视频
在真正做包装之前，我先用 FFmpeg 预处理素材：
- 将原始视频转成 1080p 横板
- 保持 30fps
- 提取音频
- 生成一个静音背景视频
这么做的好处是后续更稳定。HyperFrames 专注渲染透明包装层，FFmpeg 专注做最终合成。
这个流程比直接把所有东西塞进一个剪辑软件里更清晰：
- 原始视频是一层
- 字幕和信息卡是一层
- 音效是一层
- 最后统一合成
这种分层方式特别适合反复迭代。
✋ 我没有直接套模板
这次剪辑最重要的一点是：我没有直接找一个“科技风模板”套上去。
市场上很多短视频剪辑的问题是：
- 字幕很大，但和画面动作没关系
- 动效很多，但没有信息重点
- 卡片很炫，但遮住主体
- 转场很频繁，但不服务内容
- 整体像模板，而不是像真正的视频设计
所以这次我做的是更克制的包装：
- 画面主体永远优先
- 字幕围绕猫咪动作出现
- 信息卡只解释关键概念
- 动效只在节奏点出现
- 不用过度花哨的装饰
🛡️ 剪辑设计思路
这条视频的开头要传达一个核心信息：
两张图，让它动起来。
这个标题比“只用两张图，让画面动起来”更短、更有冲击力，也更适合视频开场。
然后我把前 10 秒左右拆成几个节奏点：
0-1 秒：先抓注意力
开场直接出现大标题：
两张图，让它动起来这句话的作用是先告诉观众：这不是普通猫咪视频，而是在展示 AI 动作生成。
1-3 秒：解释它在发生什么
字幕开始解释：
不是补帧，是生成中间动作。 模型先读懂这只猫：姿态、脸、尾巴。这一步很关键，因为技术类视频不能只“好看”，还要让观众知道自己正在看什么。
3-6 秒：跟着猫咪动作做字幕
当猫咪动作开始变化时，我加入了更有趣的动作字幕：
爪子准备启动 起跳！这一下要抓人 尾巴也要跟上节奏 五官没崩，先加分这些字幕不是传统意义上的“翻译字幕”，更像是视频里的节奏旁白。它们的作用是引导观众看细节。
6-9 秒：切入技术观察点
后面字幕开始提醒观众看 AI 视频最容易出问题的地方：
尾巴、毛发、脸部边缘，是最容易穿帮的地方。 动作越夸张，越要看边缘和五官。这就把视频从“好玩”拉回到“教学价值”。
9 秒以后：过渡到正文
最后用一句话承接后续教程：
下一步：怎么控制它不变形。这句像一个小钩子，让观众知道后面还有更具体的方法。
🧩 信息卡片怎么设计
我在画面左上角加了一个科技感信息卡：
Input → Output 首帧 + 尾帧 变成连续动作它的作用不是装饰，而是告诉观众这个视频背后的生成逻辑：
- 输入：首帧和尾帧
- 输出：连续动作
- 重点：AI 生成中间过程
信息卡和普通字幕的区别很明显：
- 普通字幕负责即时解释
- 信息卡负责结构化信息
- 动作气泡负责增加趣味和节奏
这样画面上就不是只有一种字幕形式，而是有层次。
剪辑后的视频如下
🎬 为什么这种方式适合 AI 教学视频
AI 教学视频最怕两种情况。
第一种是太干：只有画面和普通字幕，信息很完整，但观众看不下去。
第二种是太花：各种特效乱飞，看起来热闹，但真正有用的信息很少。
我这次想做的是中间路线：
- 用字幕提高理解速度
- 用动作气泡提高观看兴趣
- 用信息卡解释技术逻辑
- 用轻音效和转场增强节奏
- 保持画面干净，不抢主体
这也是我觉得 Codex + HyperFrames 这种方式很有意思的地方。它不是把视频变成传统模板，而是把剪辑变成一个可以被精细控制和快速迭代的工程。
⚙️ 技术实现上最有用的点
1. 把包装层和原视频分开
HyperFrames 只负责生成透明的包装层，例如字幕、卡片、动效。
然后再用 FFmpeg 把它覆盖到原视频上：
原视频背景层 + HyperFrames 透明包装层 + 原音频 + 轻音效 = 最终 MP4这个结构非常适合改版。
如果我想改字幕，不需要重新处理原视频。
如果我想调整卡片位置，只需要改 HTML/CSS。
如果我想换素材，也可以保留同一套包装逻辑。
2. 用代码控制字幕节奏
传统剪辑里，字幕位置和时间点通常靠手动拖动。这里我用数据结构来控制每一句字幕：
{start:3.0,text:"首帧定起点，尾帧锁定目标。",note:"Input → Output",layout:"side"}这意味着字幕可以很快改：
- 改时间
- 改文案
- 改位置
- 改样式
- 改出现方式
对于技术类视频，这是一个很大的优势，因为技术视频经常要反复调整表达。
3. 字幕不只放底部
普通剪辑里，字幕一般只在底部中间。
但这次我用了几种字幕形态：
- 中央强调字幕
- 底部说明字幕
- 右侧信息字幕
- 猫咪动作反应气泡
- 左上角结构化信息卡
这样字幕更像画面设计的一部分，而不是简单的文字叠加。
📌 和市场上常见剪辑方式有什么不同
我觉得最大的区别有四点。
1. 不是模板驱动，而是内容驱动
市面上很多剪辑模板是先有视觉效果，再把内容塞进去。
这次刚好反过来：先看猫咪动作和视频表达，再决定哪里放字幕、哪里放卡片、哪里加音效。
2. 不是一次性工程，而是可迭代工程
这套流程里的字幕、样式、动画都是代码化的。后面如果要做 V6、V7，不需要推倒重来。
比如我可以很快调整：
- 字幕密度
- 画面遮挡
- 字幕风格
- 卡片内容
- 节奏点
- 音效位置
这比传统时间线剪辑更适合做系列化视频。
3. 更适合技术内容
科技 / AI 教学视频不仅要好看，还要让观众理解：
- 这个视频在展示什么
- 关键技术点在哪里
- 哪些地方值得观察
- 后面会讲什么
所以我用了“标题 + 信息卡 + 动作字幕 + 技术提醒”的组合，而不是单纯堆特效。
4. Codex 参与了真实制作过程
这不是只让 AI 写一段文案，而是让 Codex 参与整个工程：
- 搭环境
- 初始化 HyperFrames
- 写页面结构
- 调 CSS 动效
- 调字幕节奏
- 跑 render
- 用 FFmpeg 合成 MP4
也就是说，AI 不只是创意助手，它也可以成为视频生产流程里的工程助手。
✅ 最终效果
最终视频是一条横板 1080p、30fps 的 AI 教学风开场。
它的核心效果包括：
- 开场大字标题
- 科技感信息卡
- 更密集、更有趣的动作字幕
- 根据猫咪动作出现的反应气泡
- 保留原视频主体清晰
- 少量自然转场和轻音效
- 输出为 MP4 成片
这条视频还不是最终完整版，而是第一阶段的开头包装 V1/V5 迭代。后续如果继续做，可以把这套风格扩展到完整教程：
- 增加步骤拆解
- 加入参数对比
- 加入失败案例
- 加入提示词讲解
- 加入前后效果对照
🧠 我的感受
这次最有意思的地方是：剪辑变得更像“写一个可复用的视频系统”。
传统剪辑当然依然很强，尤其是在审美、音乐、节奏和复杂画面处理上。但对于 AI 教学视频、产品演示视频、技术解释视频来说，代码化剪辑有一个很大的优势：
它可以快速迭代，而且每一次修改都很清楚。
我可以告诉 Codex：
字幕再多一点，但不要遮挡主体。 信息卡更有趣一点，但不要太花。 根据猫咪动作加一些反应字幕。然后它就能直接去改工程、重新渲染、输出新版本。
这让我感觉未来的视频制作不一定只有“剪辑软件时间线”这一种方式。对于很多结构化视频，尤其是 AI 教程、科技解说、产品演示，开源项目 + AI 编程助手 + FFmpeg可能会成为一种很实用的新工作流。
🔚 总结
这次我用一张图片生成了猫咪视频素材，然后用 Codex 和开源 HyperFrames 搭建了一套视频包装流程，最后通过 FFmpeg 合成为 MP4。
它和普通剪辑最大的区别不是“用了更多特效”，而是：
- 更工程化
- 更可迭代
- 更适合技术表达
- 字幕和信息卡更贴合内容
- 可以快速根据反馈改版
如果你也在做 AI 视频、教程视频或者产品演示视频，可以试试这种方式：先准备一个视频素材，再用 HyperFrames 设计包装层，用 Codex 帮你快速迭代，最后用 FFmpeg 输出成片。
这不是为了取代剪辑师，而是给视频创作者多一种新的生产方式。🚀
