大家好，今天给大家分享 HeyGen 开源的HyperFrames ------ 一款用 HTML 写视频、一键渲染 MP4、原生支持 AI 智能体的前端级视频渲染框架，彻底告别传统剪辑软件，让代码化视频生产变得简单高效。
项目地址：https://github.com/heygen-com/hyperframes
官方文档：https://hyperframes.heygen.com/introduction
一、项目定位：Write HTML. Render video. Built for agents.
HyperFrames 是HeyGen 推出的开源视频渲染框架，核心定位：
- 用标准HTML+CSS+GSAP描述视频 composition
- 浏览器实时预览，命令行一键导出MP4
- AI Agent 原生友好，Claude/Cursor/Codex/Gemini 可直接生成合规视频代码
- 确定性渲染：相同输入 = 完全相同输出，适合自动化流水线
一句话总结：把视频当前端页面开发，让 AI 和代码接管视频生产。
二、核心优势
1. HTML 原生，零学习成本
- 不用 React、不用专属 DSL，纯 HTML+CSS+JS 即可开发
- 自带
data-*属性声明时间轴、图层、时长，像写网页一样做视频 - 无构建步骤，
index.html直接运行，开箱即用
2. AI 智能体深度适配
- 提供官方 Skills，一行命令让 AI 学会视频创作
- 支持
/hyperframes/hyperframes-cli/gsap等斜杠指令 - AI 可直接生成字幕、动画、转场、数据图表，全程自然语言交互
3. 确定性渲染，自动化友好
- 基于 Headless Chrome + FFmpeg，帧级精确可控
- 非交互式 CLI 设计，完美融入 CI/CD、批量生成、定时产出等自动化场景
- 支持 TTS、语音转文字、背景移除等媒体预处理
4. 强大动画生态
- 原生兼容 GSAP、Anime.js、CSS Animations、Lottie、Three.js、WAAPI
- 帧精确 seek，时间线可暂停、可跳转，渲染稳定不掉帧
- 50 + 现成组件：转场、社交挂件、数据图表、视觉特效
5. 完全开源商用友好
- 协议：Apache-2.0（OSI 认证）
- 无渲染费、无席位限制、无公司规模门槛，商用零顾虑
- 对比 Remotion：纯开源 vs 源码可用，对企业更友好
三、HyperFrames vs Remotion 核心对比
表格
| 对比项 | HyperFrames | Remotion |
|---|---|---|
| 编写方式 | HTML + CSS + GSAP | React (TSX) 组件 |
| 构建步骤 | 无，直接运行 HTML | 需要打包 |
| 动画库 | 帧精确、可 seek | 墙钟时间运行 |
| HTML 直通 | 直接粘贴使用 | 需转为 JSX |
| 开源协议 | Apache-2.0 完全开源 | 自定义协议，小规模免费 |
| 分布式渲染 | 单机 | 支持 Lambda 生产级 |
四、快速上手（2 种方式）
方式 1：AI 智能体一键创作（推荐）
# 安装HyperFrames技能
npx skills add heygen-com/hyperframes然后在 AI 工具中直接用自然语言生成：
- 使用
/hyperframes创建 10 秒产品介绍视频 - 把 PDF 转为 45 秒讲解视频
- 把 CSV 生成动态条形竞赛图
- 调整字体、颜色、动画、字幕，全程自然语言交互
方式 2：手动命令行创建
# 初始化项目
npx hyperframes init my-video
cd my-video
# 浏览器实时预览
npx hyperframes preview
# 渲染输出MP4
npx hyperframes render依赖：Node.js ≥22 、FFmpeg
五、核心代码示例（HTML 写视频）
<div id="stage"
data-composition-id="my-video"
data-start="0"
data-width="1920"
data-height="1080">
<!-- 视频片段 -->
<video data-start="0" data-duration="5" src="bg.mp4" muted></video>
<!-- 图片叠加 -->
<img class="clip" data-start="2" data-duration="3" src="logo.png">
<!-- 音频 -->
<audio data-start="0" data-duration="10" data-volume="0.5" src="bgm.wav">
</div>data-start：开始时间（秒）data-duration：持续时长data-track-index：图层顺序class="clip"：标记为视频元素，由框架控制显隐
六、完整能力清单
核心包
hyperframes：CLI 工具（init/preview/render/lint）@hyperframes/core：核心解析、类型、运行时@hyperframes/engine：Puppeteer+FFmpeg 渲染引擎@hyperframes/studio：浏览器可视化编辑器@hyperframes/player：可嵌入 Web 组件@hyperframes/shader-transitions：WebGL 转场库
AI Skills 能力
- 视频创作、CLI 操作、媒体处理
- 组件安装、网页转视频、Remotion 迁移
- GSAP/Anime.js/Lottie/Three.js 动画适配
七、适用场景
- 产品宣传短视频、功能演示
- 数据可视化、动态报表、条形竞赛图
- 自媒体封面、短视频字幕动画
- AI 自动化批量生成信息流广告
- 企业内部培训、课程讲解视频
- 智能体输出可视化结果、数字人播报视频
八、总结
HyperFrames 重新定义代码化视频生产 ：用前端最熟悉的 HTML 体系做视频，深度拥抱 AI 智能体，确定性渲染、零构建成本、完全开源商用，非常适合前端开发者、AI 工程师、内容创作者、运营人员快速落地视频自动化生产。
未来随着 AI 能力增强，HyperFrames 将成为AI 视频生产基础设施，让每个人都能用自然语言 + 代码高效产出高质量视频。
我会持续分享 AI 工具、前端效率、自动化视频开发干货，欢迎关注交流～