Repolode
heygen-com

heygen-com/hyperframes

开源框架,将 HTML、CSS、媒体和可回放动画渲染为确定性的 MP4 视频,面向 AI 编码助手。

可替代:Remotion

Star
67,166
Fork
6,080
未关闭 Issue
367
最近提交
7小时前

这是什么?

HyperFrames 让你用 HTML 文件编写视频:通过元素上的 data 属性设置时间和轨道,动画可来自 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或自定义适配器。渲染时在无头 Chrome 中逐帧定位,再由 FFmpeg 编码,相同输入得到相同输出。

项目提供 CLI,可用于初始化项目、带热重载预览、代码检查,并支持本地或 Docker 渲染;同时提供面向 Claude Code、Codex、Cursor 等编码助手的技能包。可通过一条命令安装转场、叠加层、字幕和图表等可复用组件,也支持 AWS Lambda 分布式渲染。

作品无需构建步骤,可直接在浏览器中预览。项目采用 Apache 2.0 协议,以纯 HTML 而非 React 作为创作方式,定位为 Remotion 的替代方案之一。

核心功能

  • 01用带 data 属性的纯 HTML 编写视频,无需 React
  • 02支持 GSAP、CSS、Lottie、Three.js、Anime.js 和 WAAPI 动画
  • 03通过无头 Chrome 和 FFmpeg 逐帧确定性渲染
  • 04提供初始化、热重载预览、检查与渲染的 CLI
  • 05可一键安装转场、叠加层、字幕和图表组件
  • 06支持 AWS Lambda 分布式渲染

适用场景

  • 用代码生成产品发布或功能介绍视频
  • 制作由数据驱动的图表或地图动画
  • 制作带动态字幕和叠加层的社交短视频
  • 让 AI 编码助手在 CI 流程中编写并渲染视频

标签

常见问题

hyperframes 是什么?
开源框架,将 HTML、CSS、媒体和可回放动画渲染为确定性的 MP4 视频,面向 AI 编码助手。 HyperFrames 让你用 HTML 文件编写视频:通过元素上的 data 属性设置时间和轨道,动画可来自 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或自定义适配器。渲染时在无头 Chrome 中逐帧定位,再由 FFmpeg 编码,相同输入得到相同输出。
hyperframes 可以免费使用吗?用的什么许可证?
hyperframes 以 Apache-2.0 许可证开源。用于商业产品前,请先确认许可证条款。
hyperframes 还在维护吗?
活跃维护中。hyperframes 最近一次提交是在 2026年10月19日。
hyperframes 适合用来做什么?
用代码生成产品发布或功能介绍视频 制作由数据驱动的图表或地图动画 制作带动态字幕和叠加层的社交短视频 让 AI 编码助手在 CI 流程中编写并渲染视频
在哪里获取 hyperframes?
源代码和安装说明在 GitHub 上:https://github.com/heygen-com/hyperframes

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目