Codex 现在能做视频了——Hyperframes 太离谱

视频信息

引言

“视频剪辑的瓶颈从来不是渲染本身，而是剪辑师——人。”

David Ondrej（剪辑视频 9 年，从 15 岁开始）在本视频中宣告：Hyperframes 让 AI Agent 用 HTML 代码直接做视频，时间轴变成了代码。Codex / Hermes / Claude 都能成为世界级剪辑师。本教程将完整还原 Hyperframes 在 Codex 中的部署、HTML-in-Canvas 新特性的开启、以及 6 个真实案例（含产品 demo、3D 动效、订阅按钮、音频波形、3D iPhone、网站转产品标签）。

第一阶段：为什么 Hyperframes 是革命？

传统视频剪辑工具

Adobe Premiere、Final Cut、CapCut、达芬奇——都要求人在 timeline 上拖 clip。

Hyperframes 把 timeline 变成代码

“timeline 变成代码后，Codex、Hermes、Claude 这些 Agent 本来就极擅长写 HTML，于是它们瞬间成了视频编辑师。”

工作流： - 你用英文 prompt - Agent 写 HTML / CSS / JS - Hyperframes 渲染成视频

没有时间轴拖拽，没有关键帧，没有图层。

Hyperframes 能做什么？

1. 一句 prompt 出产品 demo
2. 自定义 motion graphics 动画
3. 个性化品牌素材（lower thirds、订阅动画、Twitter 帖子）
4. 自动截屏并嵌入视频
5. 3D 设备动画（手机、笔记本）
6. 接 ElevenLabs 做配音和音效

第二阶段：Codex App 部署 Hyperframes

Step 1：装 Codex App

• 搜 “Codex app” → OpenAI 官方文档
• macOS / Windows 都支持

Step 2：模型与速度配置（关键！）

Step 3：打开 Hyperframes 插件

1. 在 Codex 左上角点 Plugins
2. 搜 “Hyperframes”
3. 点 + → Install
4. 含 HTML-in-Canvas 的全套 skills

Step 4：（重要）开启 Chrome canvas-draw-element flag

新特性 HTML-in-Canvas 需要浏览器开关：

1. 把官方文档给的 chrome://flags/... 链接粘到 Chrome 或 Brave 新标签页
2. 找到 canvas-draw-element，打开
3. 重启浏览器

不开启就用不了这次发布的”杀手级”功能。

第三阶段：第一个 prompt——让 Hyperframes 解释自己

David 让 Codex 用 Hyperframes 创建一个”为什么 Hyperframes 跟传统 AI 视频工具本质不同”的动态图。

关键 Pro Tip

Do not remove old compositions when making new ones. 
Save this as a memory into agents.md

“这一条非常重要。Codex 有时会重写旧 composition，你就丢掉以前的版本了。让它每次新建一个 composition。”

执行情况

• 跑了 10 分钟
• 即使 Medium + Fast 也要时间，因为生成上千行 HTML
• 完成后 Codex 自动打开 localhost:3000，即 Hyperframes Workspace

Hyperframes Workspace

• 左侧：assets、compositions、code
• 底部：时间线 clips
• 可控制：2× 速度、loop、frames/seconds 切换、渲染 MP4

第四阶段：实时迭代——颜色改成红色渐变

把 Codex 当成”视频导演”：

change the design to be kind of a red gradient vibe. 
Do not change anything else.

Codex 不会重写整个 10 分钟的工程——只改 CSS 颜色变量。2.5 分钟搞定。

“Hyperframes Workspace 直接反映改动，无需重新跑一遍。”

第五阶段：并行 worktree——同时跑多个 thread

Codex 内建 git worktrees，可以在主 thread 跑的时候开新 thread 并行：

第二个 prompt：3D 液态玻璃订阅按钮

Create a liquid glass subscribe animation 
inside the Hyperface workspace. 
Build it as a single self-contained HTML file 
and open it using the HTML preview panel in Hyperframes.

跑出来：流畅的液态玻璃效果 + 订阅按钮，仅几分钟。

第三个 prompt：升级动画——“更 3D、更疯狂”

update this animation so it's more visual, 
faster, and more 3D-like. 
Just make it crazier like a professional VFX designer would.

Codex 跑 3 分钟，原地升级。

第六阶段：上传真实素材——把 logo 加进动画

直接拖 logo 文件到 Codex，发 prompt：

Add logo to existing liquid glass animation. 
Import my logo asset above the glass card, 
centered horizontally.

不到 2 分钟产出带循环 glow 动画的 logo——这是 freelance 设计师收 100-500 美元的活。

第七阶段：6 个真实案例

案例 1：自动注册产品 demo（用 Vectal.ai 登录页）

turn vectal.ai into a real product label

一句话。Codex 自己读了登录页，分析了品牌色调与排版，生成精美产品 demo。

“一行 prompt。我知道这要我手工做多久；我也知道创业公司创始人多么愿意为这种 demo 付钱。”

案例 2：3D iPhone 动画 + David 频道介绍

让 Codex 先去读 David 的 YouTube 频道、理解内容主题，再生成 3D iPhone 动画。

结果有些边缘 box 错位——直接截图扔回 Codex：“fix these little boxes that are a bit weird”，自动修复。

案例 3：音频波形可视化（David 最爱的用例）

“这个用例之前我浪费过太多小时——找视觉、剪辑波形。”

把一段 10 秒 MP3 拖进去，让 Codex 生成动态波形。

实操中遇到问题： - 波形 hit top 太快 → 截图 + “make it more dynamic” - 没合成 MP4（只是 HTML 预览）→ “do the MP4 render using the Hyperframes skills” - 反复跑了 40 分钟（reasoning medium 偏慢，extra high 反而更高效）

最终拿到带波形可视化的完整 MP4。

案例 4：Notion 风的网格动画

社区 playground 里有人做了 Notion 风格的复杂动画——开源代码可改。

案例 5 / 案例 6

社区还有 VFX H&M 风、各种产品演示。Hyperframes 社区 playground 是灵感源 + 起点代码库。

第八阶段：使用过程的核心技巧

/compact 频繁使用

“Hyperframes 会大量吃掉你的 context window，比普通 Codex session 更费。频繁用 /compact。”

预发消息（Pre-send）

Codex 允许在 Agent 跑的时候预先把下一条 prompt 发过去——它跑完自动接着执行。极大提升流水线效率。

并行 thread

任何”与当前任务无关”的新需求，直接开新 thread。Codex 的 git worktree 让多 thread 互不干扰。

Codex $100 套餐定位

“Codex 的 $100 套餐，是你能花到的 AI 钱里最值的 100 美元。比 Claude Code 限额慷慨太多，甚至不在一个量级。”

第九阶段：为什么这对每个人都重要？

David 的核心论点：

“这件事不是替代顶级 0.01% 动画师，而是给所有人成为动画师的能力——就像两年前 Code-to-Cloud / Claude Code 给了所有人构建生产级软件的能力。”

套利窗口

“现在有个巨大套利：把这种能力卖给那些落后 6-12 个月的客户、不在 AI 圈的内容创作者。任何新技术诞生时都有无数赚钱方式。”

真正稀缺的是品味（Taste）

“成本极低，做 100 个 hyperframes 动画很便宜。真正的 alpha 是知道哪一个是好的。这就是为什么 Rick Rubin 不会任何乐器，却拿顶级出场费。”

核心要点速查表

8 个实用启示

1. 必须打开 canvas-draw-element flag——HTML-in-Canvas 是杀手级特性。
2. 第一条 prompt 永远先给 agents.md 写规则：“Do not remove old compositions”。
3. 用 Medium + Fast 起步，对效果不满意再升 Extra High。
4. 并行多 thread：颜色调整、新动画、修小 bug 全部并行跑。
5. 预发 prompt（pre-send）：边看边写下一条，让 Codex 接力。
6. /compact 比普通 session 更频繁——Hyperframes 吃 context 很猛。
7. 截图反馈最高效：发现错位/不对就截图发回 Codex，比文字描述快 10 倍。
8. 建自己的 Hyperframes asset 库：好的 composition 是可复用资产，未来出片只需 1 分钟。

10 个常见误区

1. “AI 做视频还很初级”——错，Hyperframes 已经能做品牌素材级动效。
2. “需要懂 After Effects 才能用”——错，纯英文 prompt 即可。
3. “Claude Code 比 Codex 更适合做 Hyperframes”——错，Codex App 内置插件，体验更顺。
4. “Extra High 才能做出好东西”——错，Medium 已经超出预期，且明显更快。
5. “上传素材会很麻烦”——错，拖进 Codex 就行。
6. “做完一次就完事”——错，Workspace 可继续编辑、调速、循环、渲染 MP4。
7. “渲染要等几小时”——错，几分钟出预览，几分钟完成 MP4。
8. “免费 Codex 套餐够用”——错，至少 $100 套餐才能舒服跑长时段任务。
9. “需要专业动画师才能修小问题”——错，截图 + 一句反馈就够了。
10. “做了内容也没人看”——错，抢先把这套卖给落后客户和创作者就是套利。

12 个关键要点

1. 视频剪辑的瓶颈是人，不是机器——AI Agent 把这道天花板击穿。
2. Hyperframes 让 HTML 变成视频语言——Agent 的强项瞬间复用到视频领域。
3. Codex 是当下 Hyperframes 的最佳 harness，官方插件一键安装。
4. HTML-in-Canvas 是 2026-05 发布的杀手特性，必须开 Chrome flag。
5. agents.md 写规则 是稳定迭代的前提（保留旧 composition 等）。
6. 并行 thread + 预发 prompt + /compact 是高效工作流三件套。
7. Codex $100 套餐是 AI 花费里 ROI 最高的之一。
8. 真正的 alpha 是品味（taste）——成本低，判断稀缺。
9. 2026 年套利窗口：把 AI 视频卖给落后 6-12 个月的客户。
10. 资产库化：每个 composition 都是未来可复用 1-2 分钟出片的”积木”。
11. 截图驱动迭代 是 AI 视频时代最高效的反馈机制。
12. 观看不行动 = 无价值——这一类视频，看完不做等于没看。

额外资源

结论

“你不动手做，这视频对你毫无价值。”

David 的结尾是命令式的。Hyperframes 不是另一个 AI 工具，它代表视频生产从”timeline 拖拽”到”code prompt”的范式跃迁。Codex + Hyperframes + GPT-5.5 + HTML-in-Canvas = 你今晚就可以做出过去要付几千美元的专业动效。

2026 年的内容创作者分水岭：会用代码 prompt 出视频的人 vs. 还在 timeline 上拖 clip 的人。前者半小时出 6 个高质量素材；后者一周做不完一个开场动画。

Set it up, build something, ship it。 套利窗口正在关闭，但还没关上。