Codex 最强剪辑插件HyperFrames:写一段 HTML,直接生成 MP4 视频

最近刷推的时候，看到好几个人发了同一种视频。

画面很精致，动效很流畅，标题淡入淡出，数据图表一帧帧跳出来，背景还有微妙的渐变动画。

这个是一个叫 HyperFrames 的开源项目。是 HeyGen 做的，对，就是那个做 AI 数字人的 HeyGen。但这次他们没搞数字人，搞了一个完全不一样的东西，让你用写网页的方式来做视频。

写 HTML，渲染成 MP4。

HyperFrames 的逻辑其实不复杂。

你写一段 HTML，里面可以有文字、图表、背景、动画，跟写网页没什么区别。然后 HyperFrames 会把你的 HTML 一帧一帧截图下来，最后用 FFmpeg 拼成一个 MP4 视频。

听起来好像没什么了不起的？

但你仔细想想，这个思路其实很吊。

传统做视频，你得打开 Premiere 或者 After Effects，拖素材、调时间轴、加关键帧、导出渲染，一个 10 秒的产品介绍动画，搞不好得折腾一两个小时。就算用 Canva 这种傻瓜工具，你也得在那个图形界面里点来点去。

但如果视频变成了代码呢？

代码能怎样？AI 能写啊。

这才是 HyperFrames 真正炸的地方。它不是给人类设计的视频编辑器，它是给 AI Agent 设计的视频创作框架。语言模型天生就懂 HTML，你让 GPT 写一段带动画的网页，它闭着眼都能写。现在把这段网页直接渲染成视频，中间不需要任何图形界面的操作。

从「你用鼠标做视频」变成了「你用嘴做视频」。

说具体点，它能做什么。

HyperFrames 能做的视频类型，基本覆盖了大部分「不需要实拍素材」的场景。

产品介绍视频，标题淡入，功能点一个个弹出来，底下配个进度条动画。这种以前得找设计师做的活，现在一段 Prompt 搞定。

数据可视化动画，柱状图从底部长出来，饼图旋转展开，数字跳动。做周报、做汇报的时候太好用了。

文字动效，大标题从左边滑进来，副标题跟着淡入，背景有粒子效果。发朋友圈、做封面都能用。

还有 lower third（就是视频底部那个人名+头衔的小条），新闻播报风格的字幕条，倒计时动画，Logo 展示。这些以前都是 Motion Graphics 设计师的活。

而且因为底层是 HTML + CSS + JavaScript，理论上你在网页里能实现的效果，它都能渲染成视频。想用 Tailwind 写样式？没问题。想用 GSAP 做复杂动画？内置支持。想搞个 Canvas 画布画点什么？也行。

不过要注意，目前 HyperFrames 主要适合做「图形+文字+动画」类的视频。如果你想做真人出镜、实拍剪辑那种，这个工具不是干这个的。它的定位更像是 Motion Graphics 的平替，不是 Premiere 的平替。

使用非常简单：

你打开 Codex，安装 HyperFrames 插件。

然后你就可以开始用自然语言描述你想要的视频了。

你可以这样说。

帮我做一个 10 秒的产品介绍视频，深色背景，标题「AI一手」从中间淡入，3 秒后标题上移，下方出现三个功能点，逐个从左侧滑入，每个间隔 1 秒。最后所有元素淡出，显示一个 Logo。

Codex 会根据你的描述，自动用 HyperFrames 的语法写好 HTML 代码，然后你可以预览效果，不满意就接着改，满意了直接渲染成 MP4。

按照 HyperFrames 官方的 Prompt Guide，写 Prompt 的时候把这四个要素说清楚，出来的效果就不会太差，时长（多少秒）、画面比例（16:9横屏还是9:16竖屏）、风格（简约、暗黑、活泼）、关键元素（标题、图表、字幕、背景音乐）。

下面是几个典型场景：

场景一，产品介绍视频

这个是最基础的，也是用得最多的。

@HyperFrames by HeyGen，做一个 15 秒的产品介绍视频，16:9 横屏，1920x1080。风格：深色背景，简约科技感，字体用白色无衬线体。内容安排：- 0-3秒：产品名「AI一手」从画面中央淡入，字号大，底下一行小字「你的 AI 工具第一手体验」同步淡入- 3-6秒：产品名上移至顶部，下方依次滑入三个功能亮点，每个间隔 1 秒，从左侧滑入，带轻微弹性效果- 6-12秒：三个功能亮点逐个放大高亮展示，每个停留 2 秒- 12-15秒：所有元素淡出，中央显示 Logo 和一行「关注公众号 获取更多」加一个从深蓝到深紫的背景渐变动画，整个视频期间缓慢过渡。

这个 Prompt 你直接复制进 Codex，出来的效果就已经挺像那么回事了。

场景二，数据可视化动画

做周报、做汇报的时候，这种太好用了。

你也可以更简单，如果你手头有数据文件，直接把 CSV 丢给 Codex，然后说一句。

把这份 CSV 数据做成一个动态柱状图竞赛动画，使用 @HyperFrames by HeyGen，30秒，16:9，暗色主题。

这种「喂数据让 AI 自己编排」的方式，HyperFrames 官方叫 warm-start，出来的效果往往比你自己手动排版还好，因为 AI 会自动处理数据的分组、排序和可视化逻辑。

场景三，社交媒体竖屏短视频

发抖音、小红书的时候能用上。

场景四，个人品牌 Logo 展示

做视频的片头片尾用。

这几个场景基本覆盖了大部分人的需求。

还有一个很重要的技巧，HyperFrames 官方 Prompt Guide 里反复强调的一点，就是不要每次都从头重写 Prompt。第一次生成之后，直接像跟剪辑师聊天一样改就行。

比如第一版出来之后，你可以接着说。

标题字号放大 2 倍，背景色改成纯黑，在第 3 秒的位置加一个 lower third 显示我的名字和头衔。字幕和 lower third 有重叠的话，把字幕往上挪一点。

这种「对话式迭代」比重新描述整个视频高效太多了。AI 会记住之前的上下文，只改你说的那部分。

以前你想做一个动画，你得学 After Effects，得理解关键帧、缓动曲线、合成层这些概念。门槛很高。

后来有了 Canva、剪映这些工具，门槛降低了，但你还是得在图形界面里操作。拖来拖去，点来点去。

现在 HyperFrames + Codex 这个组合，直接把门槛拉到了「你会说话就行」。

不过我也想泼一盆冷水。

目前 HyperFrames 还是一个偏早期的项目。它能做的视频类型有限，主要是图形动画类的。如果你期待它能做出电影级的视觉效果，那不现实。它更适合做「功能性视频」，产品演示、数据展示、标题动画、社交媒体短视频这些。

另外，通过 Codex 来用的话，AI 生成的代码不一定每次都完美。你可能需要来回调几次才能得到满意的效果。

顺着这个再聊聊，什么人适合用。

做自媒体的，需要经常出产品介绍、功能展示类的视频，但又不想每次都开 Premiere 折腾半天的。HyperFrames 能帮你把这类视频的制作时间从小时级压到分钟级。

做周报汇报的打工人，想把数据做成动态图表视频来汇报，比 PPT 高级，但又不想学 After Effects 的。

独立开发者，需要给自己的产品做 Demo 视频、Launch Video，但没预算请设计师的。

不适合的场景有：

需要真人出镜的 Vlog，不行。

需要实拍素材剪辑的，不行。

需要电影级特效的，也不行。

它就是一个 Motion Graphics 的 AI 平替，定位很清楚。

说真的，当我看到有人用几句话就生成了一个相当精致的产品介绍视频的时候，还是挺感慨的。

不是感慨技术多牛，而是感慨创作的门槛真的在被一点点拉平。以前你想做一个好看的视频，你得花时间学工具、学技术、学设计。现在你只需要知道自己想要什么，然后说出来就行。

工具在变，但创意永远是你自己的。

HyperFrames 的 GitHub 仓库在这里，感兴趣的可以去看看。

https://github.com/heygen-com/hyperframes

官网在这里。

https://hyperframes.heygen.com

好了，感谢你的耐心观看，如果觉得不错，希望能点个赞、转发、收藏三连吧，如果想第一时间收到推送，也可以给我个星标⭐，我们，下次再见。