# Agentic Video is HTML: Open Sourcing HyperFrames
**作者**: Bin Liu
**日期**: 2026-04-16T17:17:52.000Z
**来源**: [https://x.com/liu8in/status/2044827628700684463](https://x.com/liu8in/status/2044827628700684463)
---
AI agents can write, can code, can talk, and operate autonomously — but they still cannot edit videos — now they can.
Today we're open-sourcing HyperFrames — an HTML-based video toolchain and rendering framework built for AI agents.
With HyperFrames, Claude Code is now our in-house Video Editor.
Try giving the HyperFrames Skill to your Agent, they will immediately start to build videos by writing HTML (and JS + CSS), then render them into MP4, MOV or WebM.
## HTML for Video Editing? What?
> What the symphony was to Beethoven, play was to Shakespeare — HTML is to agents.
AI Agents shouldn’t be learning After Effects or DaVinci Resolve, theJSON or XML based tools are simply not built for Agents, they are built for humans.
Agents (LLMs) were trained on the web. Billions of pages of HTML. Millions of CSS & JavaScript animations. Hundreds of thousands of GSAP snippets, SVG compositions, Canvas experiments. The web is the largest creative medium in their training data by orders of magnitude.
When you let agents write HTML, CSS, and JavaScript, they're working in their native tongue.
So we take their best work, add a thin set of HyperFrames' `data-` attributes, done, HTML becomes the the best agent-native video editing tool chain.
We have some proof. This is our launch video - created by prompting Claude Code to use HyperFrames:
Fully done with HyperFrames - star our github & comment "HYPERFRAMES" to get full source code.
HyperFrames' backstory
HeyGen started by helping millions of people create AI avatars to replace the camera — but we quickly learned that the avatar is only half the story. People still need to add complex motion graphics, B-rolls, and visual storytelling to make their videos engaging.
Mastering video editing is incredibly hard. It always involves a complex timeline, layers, keyframes — skills that take years to learn. After Effects is even more difficult for most people. So we took a different route and started experimenting with using HTML & JavaScript to make motion graphics for our users' videos.
We eventually landed on adopting GSAP — a JavaScript animation library. We built it into our Video Editor so users can add editable motion graphics to their videos:
GSAP-based motion graphics animation
At the time, Agents weren't good enough. Building Motion Designs by writing HTML+CSS+JS based animations was still quite challenging. It required a lot of back-and-forth and often needed engineers to manually build them
(yes, you heard it right, hand-written code).
But we already knew that code → video was the direction.
So we started experimenting with ways to further automate motion graphics and B-rolls and started integrating them into our Video Agent. And it was WILDLY successful. It became the #1 thing users kept raving about:
> "The illustrative animations are fantastic!"
As you can tell, production quality jumps up when Motion Graphics are added:
Glassmorphism motion overlays created by agent based on footage
With this success, we know we are onto something: our Video Agent was already pulling together multimedia assets into continous scenes and illustrating ideas with motion graphics. All done through code-gen. But the models weren’t quite there yet to produce reliable or creative output on their own.
> Then came November 2025, Gemini 3 and Opus 4.5 previewed.
We swapped them into our agent — and voilà. Video Agent started producing motion graphics and multi-scene b-rolls consistently and with high-quality.
Furthermore, with pure HTML+CSS+JavaScript, we were able to get full-length videos, aesthetically striking and engaging, built from the most basic HTML primitives and JavaScript animations. Almost production-ready.
That's when we started converging on the earliest versions of HyperFrames.
How does HyperFrames work?
HyperFrames got its name because it turns HTML (HyperText Markup Language) into Video Frames: Hyper---Frames.
On top of the standard Web syntax, HyperFrames simply require a handful of `data-` attributes to be added to HTML elements so we can define a video timeline:
read /hyperframes/SKILL.md for details
Here’s a super simple example of HyperFrames-based video’s HTML code:
This is a complete video composition in under 70 lines. Scene one fades in a title and scene two blur-crossfades into a CTA — all in 5 seconds. `data-start` and `data-duration` control timing. `data-track-index` controls layering. GSAP drives animation. Everything else is just HTML, CSS & JS:
Anything that works in a browser works in Hyperframes. CSS animations, GSAP timelines, Lottie, Three.js, D3 visualizations, Google Fonts — the agent can use whatever web technology it already knows. No wrappers. No heavy handed framework-to-learn.
Of course, much more thought have gone into architecting HyperFrames, we will release a more detailed technical blogs in the coming weeks.
## There you have it - HyperFrames:
- It lets agents build videos through HTML
- Create, Preview, Render all done locally.
- Fully open source today at https://github.com/heygen-com/hyperframes
One command, make your Agent a Video Editor:
## Why open source?
Video is one of the most effective communication medium, and Agents should be able to create videos to communicate with humans with rich visualization. But the friction today is immense, because all the video building tools today are not architected for Agents.
We're open-sourcing HyperFrames to remove that friction entirely: any agent, any LLM, zero API keys, instant video, all done locally.
More fundamentally, we believe HTML is the format for the future of video. We are dedicated to build this future, together with the broader community who share that same conviction.
## THANK YOU!
Shoutouts to our tiny but incredibly mighty squad behind HyperFrames v1.0.0: Abhay (@AbhayZala7), Jake (@JakeFromHeyGen), James (@Rames_Jusso), Miguel (@Miguel07Code) and Vance Ingalls.
Special thanks to everyone who lended their support in the past 3 months:
@joshua_xu_ @yanrong @kimsanovv7 @davidttjjss @toolstelegraph @yaboinick @emse_jianle @jieun @JeaneCarlosX
And we drew inspiration from some of the best open source projects out there: @greensock , @Remotion, @openclaw and others. And we're open sourcing everything we've built so far — core engine, studio, renderer, skills, examples — all under Apache 2.0.
We are all-in on HyperFrames and will constantly be building and collaborating with anyone who wants to contribute to HyperFrames.
## 相关链接
- [Bin Liu](https://x.com/liu8in)
- [@liu8in](https://x.com/liu8in)
- [136K](https://x.com/liu8in/status/2044827628700684463/analytics)
- [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)
- [@AbhayZala7](https://x.com/@AbhayZala7)
- [@JakeFromHeyGen](https://x.com/@JakeFromHeyGen)
- [@Rames_Jusso](https://x.com/@Rames_Jusso)
- [@Miguel07Code](https://x.com/@Miguel07Code)
- [@joshua_xu_](https://x.com/@joshua_xu_)
- [@yanrong](https://x.com/@yanrong)
- [@kimsanovv7](https://x.com/@kimsanovv7)
- [@davidttjjss](https://x.com/@davidttjjss)
- [@toolstelegraph](https://x.com/@toolstelegraph)
- [@yaboinick](https://x.com/@yaboinick)
- [@emse_jianle](https://x.com/@emse_jianle)
- [@jieun](https://x.com/@jieun)
- [@JeaneCarlosX](https://x.com/@JeaneCarlosX)
- [@greensock](https://x.com/@greensock)
- [@Remotion](https://x.com/@Remotion)
- [@openclaw](https://x.com/@openclaw)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [1:17 AM · Apr 17, 2026](https://x.com/liu8in/status/2044827628700684463)
- [136.9K Views](https://x.com/liu8in/status/2044827628700684463/analytics)
- [View quotes](https://x.com/liu8in/status/2044827628700684463/quotes)
---
*导出时间: 2026/4/17 14:29:51*
---
## 中文翻译
# 智能体视频即 HTML：开源 HyperFrames
**作者**: Bin Liu
**日期**: 2026-04-16T17:17:52.000Z
**来源**: [https://x.com/liu8in/status/2044827628700684463](https://x.com/liu8in/status/2044827628700684463)
---
AI 智能体可以写作、编程、交谈并自主运作 —— 但它们仍然无法编辑视频 —— 现在它们可以了。
今天，我们开源了 HyperFrames —— 这是一个专为 AI 智能体构建的基于 HTML 的视频工具链和渲染框架。
有了 HyperFrames，Claude Code 现在成为了我们内部的视频编辑器。
试着将 HyperFrames 技能赋予给你的智能体，它们将立即开始通过编写 HTML（以及 JS + CSS）来构建视频，然后将其渲染为 MP4、MOV 或 WebM 格式。
## 用 HTML 进行视频编辑？什么？
> 交响乐之于贝多芬，戏剧之于莎士比亚 —— 正如 HTML 之于智能体。
AI 智能体不应该去学习 After Effects 或 DaVinci Resolve，那些基于 JSON 或 XML 的工具根本不是为智能体设计的，它们是为人类设计的。
智能体（LLM）是在网络上训练出来的。数十亿页的 HTML。数百万的 CSS 和 JavaScript 动画。数十万个 GSAP 代码片段、SVG 组合、Canvas 实验。按数量级计算，网络是其训练数据中最大的创意媒介。
当你让智能体编写 HTML、CSS 和 JavaScript 时，它们正在使用自己的母语工作。
因此，我们提取了它们最优秀的作品，添加了一小套 HyperFrames 的 `data-` 属性，就这样，HTML 变成了最好的原生智能体视频编辑工具链。
我们有一些证据。这是我们的发布视频 —— 通过提示 Claude Code 使用 HyperFrames 创建的：
完全使用 HyperFrames 完成 —— 在我们的 GitHub 上点颗星，并评论“HYPERFRAMES”即可获取完整的源代码。
HyperFrames 的背景故事
HeyGen 最初是帮助数百万人创建 AI 数字人 以代替摄像头 —— 但我们很快意识到，数字人只是故事的一半。人们仍然需要添加复杂的动态图形、B-roll（辅助素材）和视觉叙事来使视频更具吸引力。
掌握视频编辑极其困难。它总是涉及复杂的时间轴、图层、关键帧 —— 这些技能需要数年时间才能学会。对于大多数人来说，After Effects 甚至更难。因此，我们采取了不同的路线，开始尝试使用 HTML 和 JavaScript 为用户的视频制作动态图形。
我们最终选择了采用 GSAP —— 一个 JavaScript 动画库。我们将其内置到视频编辑器中，以便用户可以添加可编辑的动态图形：
基于 GSAP 的动态图形动画
那时，智能体还不够强大。通过编写基于 HTML+CSS+JS 的动画来构建动态设计仍然相当具有挑战性。它需要大量的来回沟通，通常还需要工程师手动构建
（是的，你没听错，手写代码）。
但我们已经知道，代码 → 视频 是未来的方向。
因此，我们开始尝试进一步自动化动态图形和 B-roll 的方法，并开始将它们集成到我们的视频智能体中。结果非常成功。它成为了用户赞不绝口的第一大功能：
> “说明性动画太棒了！”
如你所见，加入动态图形后，制作质量跃升了一个台阶：
智能体基于素材创建的玻璃拟态动态叠加层
取得了这一成功后，我们知道自己找到了方向：我们的视频智能体已经能够将多媒体资产组合成连续的场景，并用动态图形来阐述想法。这一切都通过代码生成完成。但当时的模型还无法独立产出可靠或富有创意的成果。
> 随后到了 2025 年 11 月，Gemini 3 和 Opus 4.5 预览版发布。
我们将它们置换进我们的智能体 —— 瞧，视频智能体开始持续且高质量地制作动态图形和多场景 B-roll。
此外，通过纯 HTML+CSS+JavaScript，我们能够利用最基本的 HTML 原语和 JavaScript 动画，构建出全长、在美学上引人注目且引人入胜的视频。几乎已准备好用于生产。
也就是在那时，我们开始汇聚成 HyperFrames 的最早版本。
HyperFrames 如何工作？
HyperFrames 之所以得名，是因为它将 HTML（超文本标记语言）转化为视频帧：Hyper---Frames。
在标准 Web 语法的基础上，HyperFrames 只需在 HTML 元素上添加少量的 `data-` 属性，这样我们就可以定义视频时间轴：
阅读 /hyperframes/SKILL.md 了解详情
以下是一个基于 HyperFrames 的视频 HTML 代码超简单示例：
这是一个在 70 行以内的完整视频构图。场景一淡入标题，场景二模糊交叉淡入 CTA（行动号召） —— 全部在 5 秒内完成。`data-start` 和 `data-duration` 控制时间。`data-track-index` 控制图层。GSAP 驱动动画。其余的只是 HTML、CSS 和 JS：
任何在浏览器中运行的东西都可以在 Hyperframes 中运行。CSS 动画、GSAP 时间轴、Lottie、Three.js、D3 可视化、Google Fonts —— 智能体可以使用它已经知道的任何 Web 技术。无需封装。无需学习繁重的框架。
当然，构建 HyperFrames 的架构花费了更多的心思，我们将在未来几周发布更详细的技术博客。
## 总结一下 —— HyperFrames：
- 它允许智能体通过 HTML 构建视频
- 创建、预览、渲染全部在本地完成。
- 今天在 https://github.com/heygen-com/hyperframes 完全开源。
只需一个命令，即可让你的智能体成为视频编辑器：
## 为什么要开源？
视频是最有效的沟通媒介之一，智能体应该能够创建视频，通过丰富的可视化与人类沟通。但目前的摩擦力巨大，因为现有的所有视频构建工具都不是为智能体设计的。
我们开源 HyperFrames 是为了彻底消除这种摩擦：任何智能体、任何 LLM、零 API 密钥、即时视频、全部在本地完成。
更根本的是，我们相信 HTML 是视频未来的格式。我们致力于与更广泛的、拥有相同信念的社区共同构建这个未来。
## 谢谢大家！
感谢 HyperFrames v1.0.0 背后精简但极其强大的团队：Abhay (@AbhayZala7)、Jake (@JakeFromHeyGen)、James (@Rames_Jusso)、Miguel (@Miguel07Code) 和 Vance Ingalls。
特别感谢在过去 3 个月中提供支持的每一个人：
@joshua_xu_ @yanrong @kimsanovv7 @davidttjjss @toolstelegraph @yaboinick @emse_jianle @jieun @JeaneCarlosX
我们从一些最优秀的开源项目中获得了灵感：@greensock、@Remotion、@openclaw 以及其他项目。我们正在开源迄今为止构建的一切 —— 核心引擎、工作室、渲染器、技能、示例 —— 全部采用 Apache 2.0 协议。
我们全力以赴投入 HyperFrames，并将不断与任何希望为 HyperFrames 做出贡献的人合作建设。
## 相关链接
- [Bin Liu](https://x.com/liu8in)
- [@liu8in](https://x.com/liu8in)
- [136K](https://x.com/liu8in/status/2044827628700684463/analytics)
- [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)
- [@AbhayZala7](https://x.com/@AbhayZala7)
- [@JakeFromHeyGen](https://x.com/@JakeFromHeyGen)
- [@Rames_Jusso](https://x.com/@Rames_Jusso)
- [@Miguel07Code](https://x.com/@Miguel07Code)
- [@joshua_xu_](https://x.com/@joshua_xu_)
- [@yanrong](https://x.com/@yanrong)
- [@kimsanovv7](https://x.com/@kimsanovv7)
- [@davidttjjss](https://x.com/@davidttjjss)
- [@toolstelegraph](https://x.com/@toolstelegraph)
- [@yaboinick](https://x.com/@yaboinick)
- [@emse_jianle](https://x.com/@emse_jianle)
- [@jieun](https://x.com/@jieun)
- [@JeaneCarlosX](https://x.com/@JeaneCarlosX)
- [@greensock](https://x.com/@greensock)
- [@Remotion](https://x.com/@Remotion)
- [@openclaw](https://x.com/@openclaw)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [1:17 AM · Apr 17, 2026](https://x.com/liu8in/status/2044827628700684463)
- [136.9K Views](https://x.com/liu8in/status/2044827628700684463/analytics)
- [View quotes](https://x.com/liu8in/status/2044827628700684463/quotes)
---
*导出时间: 2026/4/17 14:29:51*