47.7K+ Star！ hyperframes：一个用 HTML 写视频、面向 AI Agent 的确定性 MP4 渲染引擎- 大数跨境

首页

47.7K+ Star！ hyperframes：一个用 HTML 写视频、面向 AI Agent 的确定性 MP4 渲染引擎

AIGC创想者

2026-09-13

导读：hyperframes简介开发工具HyperFrames 是一个开源的视频渲染框架，它将 HTML、CS

hyperframes简介

开发工具

HyperFrames 是一个开源的视频渲染框架，它将 HTML、CSS、媒体资源和可寻址动画转化为确定性的 MP4 视频。与传统的视频剪辑软件或基于 React 的编程视频工具不同，HyperFrames 采用纯 HTML 作为创作载体，开发者只需编写带有特定 data 属性的 HTML 文件，即可通过无头浏览器逐帧捕获并使用 FFmpeg 编码输出高质量视频。

项目特别为 AI 编程智能体（如 Claude Code、Cursor 等）进行了深度优化，内置了 20 种技能工作流，让 AI 能够理解并执行从规划、编写 HTML、添加动画到最终渲染的完整视频生产流程。

亮点特性

01HTML 原生创作模型

无需学习 React 或专有时间轴格式，直接使用标准的 HTML/CSS 编写视频，零构建步骤，单个 index.html 即可运行和预览。

02专为 AI 智能体设计

内置 20 个按需加载的技能（Skills），涵盖产品发布、PR 讲解、幻灯片、动效图形等多种场景，完美适配主流 AI 编程助手。

03确定性渲染引擎

相同的 HTML 输入必定产生完全相同的视频帧输出，天然适合集成到 CI/CD 流水线和自动化回归测试中。

04丰富的动画适配器

不绑定单一动画库，支持 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 等多种主流动画运行时。

05完全开源免费

采用 Apache 2.0 许可证，没有按次渲染收费或商业使用门槛。

使用场景

场景 1AI 智能体自动化视频生产

结合 Cursor 或 Claude Code 等 AI 编程助手，通过自然语言描述需求，由 AI 自动生成 HTML 代码并渲染出产品宣传、功能讲解等视频。

场景 2GitHub PR 动态演示视频

将 GitHub Pull Request 链接输入系统，自动提取代码变更并生成包含动画代码差异、旁白和字幕的可视化更新日志视频。

场景 3批量营销与社交媒体内容生成

利用 HTML/CSS 模板和数据驱动，在 CI/CD 流水线中批量生成带有动态图表、跑马灯效果或音乐踩点的短视频，用于社交媒体分发。

使用环境

运行环境	Node.js 22+
核心依赖	FFmpeg
运行方式	npx CLI 或 AI 编程 Agent（Claude Code / Cursor / Gemini CLI / Codex）
操作系统	macOS / Ubuntu / Debian / Windows（README 提及了各系统的 Git LFS 安装命令）

快速上手

环境要求

Node.js 22+
FFmpeg

快速上手（CLI 方式）

初始化项目

●●●

npx hyperframes init my-video
cd my-video

编写视频内容

编辑生成的 index.html，使用 data-* 属性控制时间轴和轨道，例如：

●●●

<div id="stage" data-composition-id="demo" data-start="0" data-width="1920" data-height="1080">
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Hello HyperFrames</h1>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
 const tl = gsap.timeline({ paused: true });
 tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.demo = tl;
  </script>
</div>

浏览器实时预览

●●●

npx hyperframes preview

渲染为 MP4 视频

●●●

npx hyperframes render

结合 AI 智能体使用

安装 HyperFrames 技能包，让 AI 编程助手掌握视频制作能力：

●●●

npx skills add heygen-com/hyperframes

随后即可向 AI 发送类似「创建一个10秒的产品介绍视频，包含淡入标题和背景音乐」的指令。

替代方案

对比 1Remotion

业界知名的编程视频框架，但强依赖 React 组件和打包构建流程；HyperFrames 则采用纯 HTML，无需构建且对 AI 更友好，同时采用更宽松的 Apache 2.0 协议。

对比 2FFmpeg

底层音视频处理的事实标准，但仅擅长视频拼接、转码和滤镜，缺乏高级排版、复杂动画和声明式的时间轴编排能力。

对比 3Manim

专注于数学和科学解释性视频的 Python 动画引擎，适合学术场景，但不适合通用的商业营销视频或网页级 UI 动效制作。