用 HTML 写视频？HyperFrames 有点东西
- 作者：Bougie
- 创建于：2026-05-05
- 更新于：2026-05-05
# 背景
前两天在 GitHub 上瞎逛，发现一个项目叫 HyperFrames (opens new window)，星标两天破万 — 仔细一看，是 HeyGen 出的。
说实话第一反应是：这不就是 Remotion 的 HTML 版本吗？但仔细读完 README，发现有点东西。
# 解决的问题
Remotion 用 React 组件写视频，这套方案其实挺好的。但问题在于：
- UI 开发者不熟悉 React — 很多做视频设计的同事，看到 JSX 就头疼
- 需要构建 —
npm run dev跑半天，本地调试成本高 - 动画时间不可控 — GSAP 动画在渲染时依赖 wall-clock，seek 不准确
HyperFrames 的思路是：直接用 HTML，所有时间控制通过 data 属性声明。渲染引擎会精确到帧级别 seek，不用担心动画节奏错位。
# 实际体验
安装了一下：
npx hyperframes init my-video
cd my-video
npx hyperframes preview
浏览器直接打开一个空白页面，加载 HTML 后渲染成视频预览。这种"写完 HTML 直接看效果"的体验，比跑半天 bundler 等结果舒服多了。
# AI Agent 集成是亮点
真正让我觉得有意思的，是它的 AI Agent 集成方案。
npx skills add heygen-com/hyperframes
装完 skills 后，Claude Code 直接可以用 /hyperframes 命令描述想要的视频，比如：
用
/hyperframes创建一个 10 秒的产品介绍，包含渐入标题、背景视频和背景音乐
Agent 会自动生成符合 HyperFrames 语法的 HTML，包括 GSAP 动画时间轴、Tailwind 样式等。这对于需要批量生成视频的运营场景挺实用的。
Skills 覆盖了常用的动画库：GSAP、Anime.js、Lottie、Three.js、Web Animations API，不用担心 AI 生成的代码跑不起来。
# 和 Remotion 的对比
| 方面 | HyperFrames | Remotion |
|---|---|---|
| 编码方式 | HTML + data 属性 | React 组件 |
| 构建 | 不需要 | 需要 bundler |
| 许可证 | Apache 2.0 | 需付费 |
| 分布式渲染 | 单机 | Lambda 成熟方案 |
如果你需要商业开源、组件直接可用，HyperFrames 更合适。如果你需要大规模云渲染，Remotion 目前更成熟。
# 适用场景
- 需要 AI Agent 批量生成视频的运营场景
- 熟悉 HTML/CSS 不熟悉 React 的团队
- 对开源许可证有要求的企业
# 链接
- GitHub: https://github.com/heygen-com/hyperframes (opens new window)
- 文档: https://hyperframes.heygen.com (opens new window)
- 组件市场: https://hyperframes.heygen.com/catalog (opens new window)
感兴趣可以试试，有好玩的用法欢迎交流。