HyperFrames —— 用 HTML 写视频，AI 帮你渲染

一句话介绍：HyperFrames 是 HeyGen 开源的视频生成框架。你写一段 HTML 网页，它帮你渲染成 MP4 视频。不用学视频剪辑，不用装 After Effects，像做网页一样做视频。

它能做什么

场景

示例

产品宣传视频	淡入标题 + 背景视频 + 背景音乐，10 秒出片
TikTok/抖音短视频	弹跳字幕同步 TTS 语音，9:16 竖屏一键生成
数据可视化视频	CSV 数据变成动画柱状图，自动配音讲解
网站介绍视频	输入网址，自动抓取页面风格，生成品牌宣传视频
字幕叠加层	给现有视频加动态字幕、下三分之一标题条
PPT 风格演示	文字逐页飞入，配合转场动画，导出高清视频

核心优势： - 📝 写 HTML 就行 —— 会写网页就会做视频，零学习成本 - 🤖 AI 全程辅助 —— 跟 Claude/Cursor 聊天描述需求，Agent 自动生成代码 - ⚡ 即时预览 —— 浏览器实时查看效果，改完立刻看 - 🎬 确定性渲染 —— 相同输入永远输出相同视频，适合自动化流水线 - 🆓 完全开源 —— Apache 2.0 协议，商用免费，无使用限制

开源地址

资源

链接

GitHub 仓库	https://github.com/heygen-com/hyperframes
官方文档	https://hyperframes.heygen.com
NPM 包	https://www.npmjs.com/package/hyperframes
Discord 社区	仓库 README 中有邀请链接

许可证：Apache 2.0（OSI 认证的真正开源，任意规模商用免费）

使用教程

方式一：AI Agent 辅助（推荐，最简单）

适合不想手写代码的用户。用 Claude Code、Cursor 或 Gemini CLI，跟 AI 聊天就能做视频。

第 1 步：安装 Skill

在终端执行：

npx skills add heygen-com/hyperframes

这会给你的 AI Agent 安装”使用手册”，教它怎么写正确的 HyperFrames 代码。

第 2 步：跟 AI 描述你的视频

打开 Claude Code 或 Cursor，输入：

/hyperframes 创建一个 10 秒产品介绍视频，

标题"HyperFrames 上线啦"淡入显示，

配一段科技感背景音乐，最后淡出结束。

AI 会自动： 1. 初始化项目（npx hyperframes init） 2. 生成 HTML 代码 3. 启动预览（npx hyperframes preview） 4. 你确认后执行渲染（npx hyperframes render）

第 3 步：迭代优化

像跟视频编辑沟通一样继续对话：

把标题放大 2 倍，换成暗色模式，

在 3 秒处加我的名字和职位作为下三分之一标题条。

AI 会修改代码并自动检查错误，你刷新预览即可看到效果。

方式二：手动编写（适合前端开发者）

第 1 步：环境准备

需要： - Node.js 22+（下载地址） - FFmpeg（视频编码器，安装指南）

验证安装：

node --version # 应显示 v22.x.x 或更高

ffmpeg -version # 应显示版本信息

第 2 步：初始化项目

mkdir my-video && cd my-video

npx hyperframes init .

这会创建项目结构并下载依赖（约 50-200MB，首次需要几分钟）。

第 3 步：编写视频代码

打开 index.html，写入：

<!DOCTYPE html>

<html>

<head>

<style>

body { margin: 0; background: #111; color: white; font-family: sans-serif; }

#stage { width:1920px; height: 1080px; position: relative; overflow: hidden; }

.title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

font-size: 80px; font-weight: bold; opacity: 0; }

</style>

</head>

<body>

<h1 class="title clip" data-start="0" data-duration="8">Hello HyperFrames</h1>

</div>

// GSAP 动画：标题淡入 + 缩放

gsap.to(".title", {

opacity: 1, scale: 1.2, duration: 2,

scrollTrigger: { start: 0, end: 2 }

});

// 注册到 HyperFrames 时间线

window.__timelines = [gsap.globalTimeline];

</script>

</body>

</html>

关键概念： - data-duration="10" —— 视频总时长 10 秒 - data-start="0" data-duration="8" —— 元素从 0 秒开始出现，持续 8 秒 - window.__timelines —— 把 GSAP 动画注册给渲染引擎

第 4 步：预览效果

npx hyperframes preview

浏览器自动打开，实时查看效果。修改代码后自动刷新。

第 5 步：渲染输出

npx hyperframes render --output final.mp4

等待渲染完成，当前目录下生成 final.mp4。

常用 CLI 命令速查

命令

作用

npx hyperframes init [目录]	初始化新项目
npx hyperframes preview	浏览器实时预览
npx hyperframes render	渲染输出 MP4
npx hyperframes lint	检查代码错误
npx hyperframes doctor	诊断环境问题
npx hyperframes validate	验证 composition 结构

进阶功能

网站转视频

输入任意网址，自动抓取页面风格、提取设计 Token、生成配音、构建视频：

/website-to-hyperframes https://myproduct.com

语音合成（TTS）

自动生成配音旁白：

/hyperframes-media 用 Kokoro TTS 生成这段文字的语音："欢迎来到 HyperFrames 世界"

使用现成组件

官方提供 50+ 预制组件（转场、字幕条、进度条等）：

npx hyperframes add lower-third# 添加下三分之一标题条

npx hyperframes add progress-bar # 添加进度条

常见问题

Q：需要会 React 吗？

不需要。HyperFrames 是 HTML 原生的，和 React 无关。

Q：预览卡顿但渲染正常？

正常。预览是实时播放，渲染是逐帧捕获。复杂特效可能影响预览流畅度，但不影响最终 MP4 质量。

Q：能做多长的视频？

理论上无限制，但目前是单机渲染。超长视频（>10 分钟）渲染时间较长。

Q：和 Remotion 有什么区别？

HyperFrames 用 HTML，Remotion 用 React 组件。HyperFrames 更适合 AI Agent 工作流和快速原型，Remotion 更适合 React 生态和分布式批量渲染。两者底层都是 Headless Chrome + FFmpeg。

立即开始

# 最快方式：让 AI 帮你做