Github，3.8万Star，让 AI 写 HTML 就能剪视频！

做 AI 视频这事儿，过去两条路都不太顺。

一条是剪映、Premiere 那种 GUI 工具，人坐前面拖轨道，Agent 插不上手。

一条是 Remotion 那种代码化方案，强是强，但绑死 React，Agent 写起来别扭，新手也劝退。

最近一个叫 HyperFrames 的项目很是吸引人，来自HeyGen，很多伙伴都知道，他家是做 AI 视频的老玩家。

它的 slogan 很直白： Write HTML. Render video. Built for agents.

写网页，出视频，为 Agent 而生。

项目简介

HyperFrames 是一个开源框架，用来把 HTML、CSS、媒体文件和可寻址动画，转换成确定性的 MP4 视频。

不用学一套新的时间线语言，也不用装 React 环境，就写你早就熟悉的 HTML 和 CSS，剩下的渲染工作交给它。

它可以本地用命令行跑，可以塞进 Claude Code、Cursor、Codex 这类 AI 编程工具当技能用，也可以作为底层引擎嵌进别的产品里做视频生成服务。

这个项目现在的成绩是3.8 万多星，而且不是玩具项目，已经在 HeyGen 生产环境里跑着，社区里也有 tldraw、TanStack 这些知名团队在用。

下面这四个示例，全部是开源君在本地测试生成的，纯 HTML + GSAP，不依赖任何外部素材，每个几百 KB 就能出 8~9 秒的片。

• 渐变开场标题：深色渐变背景，渐变大标题淡入上滑，底部进度条。

• 数据条形图：6 根条形逐个生长，数字同步滚动计数
• 金句卡片：暖色渐变，引号弹入，金句揭示，作者淡入
• 三场景转场：蓝/橙/青三屏交叉淡入淡出，展示”写 HTML → 加动画 → 导出 MP4″。

能做什么，不能做什么

HyperFrames 本质是”浏览器能渲染的网页 → 逐帧视频”，能力与浏览器画等号。

能做：

• 图文动效：标题包装、片头片尾、字幕条
• 数据可视化：图表生长、数字滚动、折线绘制
• 产品/品牌宣传短片：文字 + 形状 + 渐变的版式动画
• 信息图、科普动画、步骤演示
• 社媒素材：竖版 Reels/Shorts/Stories、关注页覆盖层
• 批量个性化视频：同模板换文字换图，生成上千条，确定性强、适合 CI
• 合成已有素材：把现成的视频/图片当图层叠进去

不能做：

• 实景影片剪辑：多机位、调色、粗剪真实素材，它不是 Premiere 这类 NLE
• 影视级3D/特效：Three.js 能跑，但重 3D、流体、粒子仿真还是 Blender/ C4D更稳
• 绿幕抠像、运动跟踪、模拟镜头运动
• 长片叙事、对白戏、电影感剪辑
• 专业音频混音：能加一条音轨，但不做多轨混音
• 依赖”当前时间/随机”的动画：用 Date.now()、Math.random() 会破坏确定性
• 超大量DOM/重粒子：无头 Chrome 逐帧截图会慢

功能特性

• HTML 原生，零学习成本 ：一份 index.html 加几个 data 属性就是一段完整视频。没有 React 依赖，没有私有时间线格式，会写网页就能上手。
• 为 AI Agent 而生 ：AI 代理很好驱动。配官方 skills，一句话下指令，就能 plan → 写 HTML → 预览 → 出片。
• 确定性渲染 ：同样输入，永远得到同样视频。对 CI/CD 和批量生产特别友好，也方便做回归测试。
• 无需构建步骤 ：index.html 写完直接能在浏览器里预览，不用打包，不用编译，改完刷新就能看效果。
• 动画适配器随便挑 ：GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI，想用哪个用哪个。
• 一整套技能体系 ：项目自带 19 个可按需加载的 Agent 技能，覆盖场景相当广， /hyperframes 这个路由技能会自动帮你挑合适的工作流。
• 设计系统的视频翻译层(frame.md) : design.md 是给网页用的， frame.md 把它改写成适合镜头的版本，色板字体不变，数值按视频场景重来，Agent 照着做视频就不会跑偏调性。

快速安装、使用

环境要求很简单：Node.js 22 以上，加上 FFmpeg。

如果你用的是 AI 编程 Agent（比如 Claude Code、Cursor），直接装技能包：

npx skills add heygen-com/hyperframes --full-depth

装完之后，跟 Agent 说一句话就行，例如：

用 /hyperframes，帮我做一个 10 秒的产品介绍视频，标题淡入，背景是一段视频，配上轻柔的背景音乐。

小技巧：想更专业，可以指名子 skill，比如 /product-launch-video （产品发布类），它比通用 /hyperframes 更懂这类套路。

如果你想手动用 CLI 走一遍流程：

npx hyperframes init my-videocd my-videonpx hyperframes preview      # 浏览器实时预览npx hyperframes render       # 渲染成 MP4

这是官方 README 里给的核心示例，一个视频片段、一个淡入标题、一段背景音乐：

看这段代码就能明白它的逻辑： data-start 、 data-duration 、 data-track-index 这几个属性负责时间轴调度，视频、标题、音频各占一条轨道，动画交给 GSAP 时间线来做。渲染器会在无头 Chrome 里逐帧寻址截图，再用 FFmpeg 编码合成，所以同样的代码永远出同样的视频，这就是”确定性”的来源。

Jamdou建议

我第一次跑通的时候挺意外——写个网页真能变成视频，而且同一份 HTML 连渲两次，画面一模一样。

如果你本就会写 HTML，又想把内容做成视频发出去，这工具基本零门槛，省下的时间很可观。

感兴趣的可以去 GitHub 上试试，当玩具玩玩也挺香。

项目地址：https://github.com/heygen-com/hyperframes