视频 · 趋势
用 HyperFrames 把 Claude 视频渲染成 MP4：一次实测演练
这周关于 Claude Opus 5.5 视频的帖子，常常会提到 HyperFrames 或 Remotion 这样的渲染器：Claude 把视频写成代码，渲染器再把它变成 MP4。HyperFrames 是 HeyGen 推出的开源渲染器。2026年9月28日，在 Google Trends 的 90 天视图里，HyperFrames 是与 Remotion 相关的搜索中上升最快的之一。
我们按小商家会用的方式测试了它。2026年9月28日，一个运行 Opus 5.5 的 Claude Code 会话拿到了我们在 claude.ai 里用过的同一份咖啡馆 Reel 需求，外加 HyperFrames 命令行工具。Ciyo 不运行 Claude Opus 5.5；照片来自 Ciyo，其余一切都在一台 MacBook 上运行。
HyperFrames 做什么
HyperFrames 读取一个 HTML 页面，页面中的元素带有时间属性；它在无界面（headless）Chrome 中逐帧播放这个页面，再用 ffmpeg 把这些帧编码成 MP4。因为每一帧都是根据页面计算出来的，而不是实时录制的，所以同一个文件每次都会得到同样的视频。
这个项目以 Apache 2.0 许可证开源。它的 GitHub 仓库创建于 2026年3月，0.8.81 版于 2026年9月27日发布。它提供一个 Claude Code 插件和一个命令行工具；我们通过 npx 使用命令行，所以没有全局安装任何东西。
| 对比项 | claude.ai | Claude Code + HyperFrames |
|---|---|---|
| 由谁渲染 | Claude 在对话沙盒里运行自己的脚本 | 你电脑上的 HyperFrames |
| 你能留下什么 | MP4 文件 | MP4 文件和一份可编辑的 HTML 合成 |
| 改一行字 | 再问一次；它会重新渲染 | 编辑 HTML 后再渲染一次 |
| 同一文件，同样视频 | 未测试 | 是：在我们的测试中逐字节相同 |
需求和照片
我们在 Ciyo 里以 2K 做了产品照片，得到 1440 × 2560 像素，超过 Reel 所需的 1080 × 1920。然后我们把在 claude.ai 里发过的同一份咖啡馆需求交给 Claude Code，只多加了一条指令：使用 HyperFrames 命令行，并从它自己的文档里学习格式。
通过 npx -y hyperframes@0.8.81 使用 HyperFrames CLI。从 npx -y hyperframes@0.8.81 docs（data-attributes、compositions、gsap、rendering）学习合成格式。不要安装技能、插件或任何全局内容，也不要发布。最终视频交付为 fernhollow-reel-hyperframes.mp4。Claude 一步步做了什么
整个任务用了 5 分 44 秒。Opus 阅读了文档，用 init 搭好项目骨架，并写了一个带四条轨道的 HTML 文件：照片、标题、优惠信息和片尾卡。每条轨道都是一个带开始时间和时长的元素，由 GSAP 控制其中的动画。
渲染之前，它运行了 HyperFrames 的 check 命令，结果是没有错误、四条关于结构的警告；它还用 snapshot 在选定的时刻截取了静帧。在这些静帧里，价格压到了杯子顶部，于是它移动了缩放的锚点，并把标题改小。它还去掉了一个把“New for autumn”变成全大写的样式，让文字保持原样。
渲染结果实测
在一台搭载 M1 Max 芯片的 MacBook Pro 上，render 命令用了 59 秒。MP4 为 1080 × 1920，每秒 30 帧，450 帧，15.0 秒，16.4 MB，没有音轨。五行文字全部准确。
我们接着把同一个项目又渲染了一次。这次用了 28 秒，文件逐字节相同：SHA-256 校验和一致，450 帧中 450 帧完全相同。这正是基于代码的视频对商家有用的地方：你改一个价格，变的就只有那个价格。
渲染器不会替你改好设计
HyperFrames 让渲染精确无误，但不会让设计变得更好。这条 Reel 和 Opus 在 claude.ai 里做的那条有同样的习惯：开场画面没有文字，第一行文字从 0.5 秒开始淡入，片尾卡在照片上盖了一层深色遮罩，于是杯子的亮度降到约 43（满分 255）。
好消息是，每处修改都只是在一个文件里改一小段。让 Claude 在第一帧放上名称、在片尾卡上让产品保持明亮，然后重新渲染，不到一分钟就好。
开始之前要知道的事
HyperFrames 需要你的电脑上装有 Node 22、Chrome 和 ffmpeg；它的 doctor 命令会检查这些。这个项目从 CDN 加载 GSAP，从 Google Fonts 加载两种字体，还用了一种 macOS 系统字体，所以除非使用它的 Docker 选项，在另一台电脑上渲染的效果可能会不同。命令行工具还带有匿名使用遥测，可以用 hyperframes telemetry disable 关闭。
| 命令 | 作用 |
|---|---|
| npx hyperframes docs | 显示合成格式 |
| npx hyperframes init | 创建项目文件 |
| npx hyperframes check | 在渲染前发现布局和对比度问题 |
| npx hyperframes snapshot | 在选定时刻渲染静帧 |
| npx hyperframes render | 写出 MP4 |
HyperFrames 与 Claude
HyperFrames 是什么？
HeyGen 推出的一个开源工具，在无界面 Chrome 中逐帧把 HTML、CSS 和 JavaScript 动画渲染成 MP4 或 WebM。
用 Claude 做视频一定需要它吗？
在 claude.ai 里不需要：Opus 5.5 在那里用自己的脚本渲染出了 MP4。在你电脑上的 Claude Code 里，HyperFrames 这样的渲染器负责把 HTML 变成视频，并让源文件保持可编辑。
渲染一次要多久？
在一台 M1 Max MacBook Pro 上，我们这条 15 秒、1080 × 1920 的 Reel 第一次渲染用了 59 秒，第二次用了 28 秒。
Ciyo 运行 HyperFrames 或 Opus 5.5 吗？
不运行。Ciyo 做的是产品照片。Opus 5.5 和 HyperFrames 是在一台本地电脑上的 Claude Code 里运行的。
从一张值得动起来的照片开始
在 Ciyo 里以 2K 生成产品静帧，再让代码围绕它做出动态。