HeyGen开源HyperFrames框架：Remotion劲敌，用HTML写视频的时代来了

HyperFrames演示动图：左侧HTML代码实时渲染为右侧视频

HeyGen最新开源的HyperFrames框架解决了视频制作领域的一个核心矛盾：专业工具学习成本高，而简单工具缺乏灵活性。这个基于HTML的解决方案直接把视频变成可编程对象。

为什么选择HTML而非React

虽然HyperFrames和Remotion都能实现编程式视频生成，但两者的设计哲学截然不同。

Remotion基于React架构，更适合已有React技术栈的团队，尤其是需要从电子表格批量生成大量视频的场景；

而HyperFrames则更擅长快速生成单个高质量视频，在与AI代理协作时尤为顺畅。HeyGen工程师Joshua Xu道出了这一选择的根本逻辑：LLM基于HTML训练，积累了大量Web代码知识，而React+Remotion在训练数据中占比极小。

这一设计决策带来了显著的实际优势——开发者Misbah Syed用相同提示词让Claude Opus 4.7分别生成视频，HyperFrames仅需60秒完成渲染，而Remotion不仅耗时162秒，还需额外4分钟的首次构建时间。输出体积方面，HyperFrames同样更轻量，仅4MB，相比之下Remotion通常在14MB左右。以下是对比视频（若有广告遮盖，可关闭广告后查看）

核心特性与工作流

HyperFrames的核心理念是“一个文件输入，视频输出”。它使用纯HTML标签配合data属性来控制时间轴，例如data-start="2" data-duration="3"，避免了虚拟DOM的开销。

它的AI优先设计让代理能够直接通过/hyperframes指令生成有效代码，而不需要像使用React时那样费力地应对钩子和生命周期规则。

这种设计在实际使用中带来了实在的好处。一例子是用户可以说"让标题大两倍，切换到暗色模式，并在结尾添加淡出效果"，AI代理就能够直接理解并执行。

实际应用场景

HyperFrames的应用场景远超传统视频制作。它能够将CSV数据自动转成动态图表视频，用TTS语音合成生成带字幕的教程，或者批量制作电商产品展示模板。

它还提供了50+即插即用的特效块，如示例中的npx hyperframes add instagram-follow，让开发者能够快速集成社交媒体覆盖层。

开始使用

安装HyperFrames非常简单，只需一行命令：

npx skills add heygen-com/hyperframes

这个命令不仅会安装框架，还会自动为你的AI代理安装相关技能，让它能够理解如何使用HyperFrames的特定语法。

有开发者试用后反馈，其最大优势在于"用Web标准技术栈替代专业视频软件"，但需要注意Node.js 22+和FFmpeg的环境要求。对于需要高频产出标准化视频的团队，这可能是条值得关注的技术路径。

不管怎么说，hyperframes是继remotion后，vibe video的又一大新神器，笔者视频号中也有一些remtion开发的视频，后面也会尝试使用hyperframes制作，感兴趣可以关注视频推送。

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