大家好，今天给大家分享 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 工具、前端效率、自动化视频开发干货，欢迎关注交流～