项目简介
HyperFrames 是 HeyGen 团队开源的「写 HTML 渲染视频」框架，目前已收获 19.7K Star。
它的核心思路是：用纯 HTML + CSS 来定义一段视频的画面、布局、动画和背景音乐，再用一行命令把它确定性地渲染成 MP4，
无需 React、无需任何构建步骤。
这正是它和 Codex 这类 AI 编程工具的绝配——AI 天生最懂 HTML/CSS，你只要在 Codex 里说一句
「做个 10 秒产品介绍视频」，它就能自动写出合成文件并渲染出片，程序员不用学剪辑软件，纯写代码就能做视频。
📎 相关链接与下载地址（点击展开）
核心亮点
环境要求
- Node.js ≥ 22（建议使用 LTS 版本）
- FFmpeg（用于视频渲染，需加入系统 PATH）
- 任意一款 AI 编程工具：Codex / Cursor / Claude Code / Gemini CLI
⚠️ 确保
node --version输出 ≥ 22，ffmpeg -version可正常执行。
如何使用（Codex 一键出片）
一行命令创建项目骨架，自动生成 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 # 动画图表常见问题
Q: 为什么说它和 Codex 是绝配？
因为它用纯 HTML+CSS 来描述视频，而 HTML 是大模型训练里最熟悉的语言之一。Codex 不用学任何专有 DSL，就能直接写出可渲染的视频合成文件，描述一句需求即可出片。
Q: HyperFrames 和 Remotion 有什么区别？
Remotion 用 React 组件写视频，需要构建步骤、且有商业许可限制；HyperFrames 用纯 HTML、无需构建，Apache 2.0 完全开源，商用零门槛。
Q: 支持哪些动画效果？
通过 Frame Adapter 模式支持 GSAP、Lottie、Anime.js、CSS 动画、Three.js、Web Animations API 等多种引擎，均可帧精确地确定性渲染。
Q: 可以商业使用吗？
完全可以。采用 Apache 2.0 协议，可在任何规模下商用，无按次收费、无席位限制、无公司规模门槛。
本站收集的资源仅供内部学习、研究软件设计思想与原理使用。学习研究后请自觉删除，请勿添加内容资料中的联系方式，谨防受骗；请勿传播。因未及时删除或用于其他用途所造成的任何后果，均由使用者自行承担。感谢理解与配合！
若您认为「cmzhiku.com」发布的内容侵犯了您的合法权益，请联系站长邮箱：ksxwdyx@qq.com。我们将在核实后及时进行删除处理。
本站资源大多存储于云盘。如发现下载链接失效或资源异常，请及时联系我们，我们会第一时间核实并更新。
