HyperFrames是一个TypeScript框架,它取用HTML,CSS,和GSAP动画,并生成可搜索的MP4文件.
它通过CLI在当地运行,通过MCP和技能.sh与AI代理整合,并拥有托管游乐场的船只.
核心承诺是确定代码的视频输出,这意味着代理可以写出HTML并获得帧完美视频而无需人工时间段编辑.
该项目有42K星并正在GitHub上为TypeScript发展趋势为#11.
HeyGen建它是为了让视频生成在程序上可以处理.
该架构为用于DOM渲染的Puppeteer,用于动画定时的GSAP,以及用于编码的FFmpeg.
有趣的部分是它如何保证在每层默认为同步时的确定性.
为什么HTML-to-Video Matters for Agents 大部分视频生成工具都针对人类设计师.
您拖动键框, 调整曲线, 导出 。
代理需要不同的东西:一个需要结构化输入并返回文件的函数.
HyperFrames将视频视为建筑文物.
用动画代码写出HTML,运行命令,获得MP4.
这把视频从创意工作流程转移到基础设施.
一个代理可以生成一个数据可视化,用GSAP的过渡编码为HTML,并呼叫HyperFrames来渲染.
没有GUI, 没有手动导出, 没有非决定性输出 。
相同的HTML总是产生相同的视频.
MCP服务器集成意味着代理可以引用HyperFrames作为工具.
技能.sh 分发包作为编码代理可以安装和调用的技能集.
这是作为一等代理能力的视频渲染,而不是屏幕记录的副作用.
架构: Puppeteer, GSAP, 和 FFmpeg HyperFrames 链 三个组件: Puppeteer 发射一个无头的 Chromium 实例并加载您的 HTML 。
GSAP(GreenSock Animation平台)在浏览器内部运行动画.
GSAP是决定性的,因为它使用明确的时间表,而不是CSS的过渡或请求AnimationFrame漂移.
FFmpeg用H.264或其他编码器将被捕获的帧编码为MP4.
管道是这样的: 关键是。
GSAP允许您跳到动画时段的任何点,而不实时播放.
Puppeteer在每个搜索位置捕获一个截图.
FFmpeg将截图缝入视频.
如果有这些地层漂移的话, 定时论和框架定时论会断: Puppeter 渲染: DOM 排版必须稳定 。
字体,图像,和CSS必须在抓取开始前加载.
HyperFrames等待一个准备好的信号。
GSAP动画:GSAP时间段按设计确定.
寻求总是产生相同的视觉状态.
CSS转换或循环不会.
FFmpeg编码:相同的输入帧和编码设置产生相同的输出.
HyperFrames默认为有固定比特率的H.264来避免编码器差异.
失败模式是合成资源加载 。
如果一个网页字体或图像在第一个帧捕获后加载,视频会显示闪光.
HyperFrames通过预装检查和可配置的等待时间来缓解这种情况.
另一种失败模式是GSAP时间表复杂.
如果动画使用随机值或 Date.now(),则不是决定性的.
HyperFrames不执行纯度。
它假设您的 HTML 是可复制的。
MCP 服务器和代理集成HyperFrames 将一个MCP服务器作为工具来曝光视频渲染.
服务器接受 HTML 字符串或文件路径,制作它们,并返回 MP4 URL 或 base64 blobs.
MCP服务器在呼叫之间没有持续状态.
每一个渲染物都是新鲜的"傀儡"实例.
这可以避免状态渗出,但意味着不能重新使用浏览器会话进行性能.
权衡是正确而不是速度。
技能.sh 集成包 HyperFrames 作为技能集.
一个代理可以安装它,然后调用命令.
核心技能集包括: 从 HTML 生成一个新项目来生产 MP4 打开操场 技能是非互动性的。
一个特工可以在没有人类投入的情况下在脚本中引用.
这是与激发选项的CLI工具的关键区别.
编码选择和输出形状