让Codex写HTML一键渲染视频
⭐ 开源免费HyperFrames 是 HeyGen 团队开源的「写 HTML 渲染视频」框架，目前已收获 19.7K Star。 它的核心思路是：用纯 HTML + CSS 来定义一段视频的画面、布局、动画和背景音乐，再用一行命令把它确定性地渲染成 MP4， 无需 React、无需任何构建步骤。
这正是它和 Codex 这类 AI 编程工具的绝配——AI 天生最懂 HTML/CSS，你只要在 Codex 里说一句 「做个 10 秒产品介绍视频」，它就能自动写出合成文件并渲染出片，程序员不用学剪辑软件，纯写代码就能做视频。
node --version 输出 ≥ 22，ffmpeg -version 可正常执行。一行命令创建项目骨架，自动生成 HTML 模板和配置文件：
npx hyperframes init my-video
安装 HyperFrames 技能包，让 Codex / Cursor / Claude Code 直接懂得如何生成视频：
npx skills add heygen-com/hyperframes
在 Codex 里直接描述需求，它会自动写出 HTML 合成文件并定义画面、动画、配乐：
用 hyperframes 做一个 10 秒的产品介绍视频，
深色背景 + 标题动画 + 背景音乐
本地实时预览，确认无误后一行命令渲染成 MP4，全程不用打开任何剪辑软件：
npx hyperframes preview # 浏览器实时预览
npx hyperframes render # 渲染输出 MP4
50+ 开箱即用的视频组件——社交媒体覆盖层、着色器转场、数据可视化图表等，让 Codex 直接调用：
npx hyperframes add flash-through-white # 着色器转场
npx hyperframes add instagram-follow # 社交媒体覆盖
npx hyperframes add data-chart # 动画图表
因为它用纯 HTML+CSS 来描述视频，而 HTML 是大模型训练里最熟悉的语言之一。Codex 不用学任何专有 DSL，就能直接写出可渲染的视频合成文件，描述一句需求即可出片。
Remotion 用 React 组件写视频，需要构建步骤、且有商业许可限制；HyperFrames 用纯 HTML、无需构建，Apache 2.0 完全开源，商用零门槛。
通过 Frame Adapter 模式支持 GSAP、Lottie、Anime.js、CSS 动画、Three.js、Web Animations API 等多种引擎，均可帧精确地确定性渲染。
完全可以。采用 Apache 2.0 协议，可在任何规模下商用，无按次收费、无席位限制、无公司规模门槛。