heygen-com

heygen-com / hyperframes

#8
29,9642,821+395 todayTypeScript

编写HTML,渲染视频,为智能体构建。

HyperFrames 是一个开源的 TypeScript 框架,能够将 HTML、CSS、媒体资源以及可拖拽的动画直接转换为确定性的 MP4 视频。它专为 AI 智能体设计,支持通过 CLI 在本地使用,也能与 AI 编码代理(如 Claude Code、Cursor、Gemini CLI)配合,通过技能插件自动完成规划、编写 HTML、添加动画、预览和渲染的完整生产流程。用户只需描述需求,智能体即可生成视频。核心价值在于为自动化内容创作提供可靠引擎,适用于产品发布视频、PR 演示、数据可视化动画、社交媒体短片及文档转视频等场景,同时支持通过 `frame.md` 设计系统让品牌规范直接适配视频制作。

💡 应用场景

HyperFrames最适合需要将HTML内容(含动画、媒体)确定性渲染为MP4视频的场景,尤其是AI辅助创作、自动化内容生产以及设计到视频的无缝转换。

AI生成营销视频

问题:营销团队需要快速批量生成产品介绍、功能演示等短视频,但手动制作耗时且成本高。

方案:使用HyperFrames技能,AI编码助手可根据自然语言描述自动规划、编写HTML并渲染为MP4视频,支持背景、动画、音乐等元素。

示例:输入提示词'创建10秒产品介绍视频,包含淡入标题、背景视频和背景音乐',AI即可生成完整视频。

自动化内容管道

问题:需要定期将文档、PDF、网站或数据可视化结果转换为视频,手动转换效率低下且难以保持一致性。

方案:通过CLI或Docker集成到CI/CD管道,将HTML模板与动态数据结合,自动渲染出格式统一的视频。

示例:每周自动将销售数据报表渲染为图表动画视频,用于内部汇报或社交媒体发布。

设计稿转视频

问题:设计师在Figma或Sketch中完成视觉设计后,需要手动制作动画视频,设计与视频之间存在断层。

方案:使用frame.md将品牌设计规范转换为视频适配版本,AI代理可直接基于设计稿生成符合品牌风格的动画视频。

示例:将品牌色板、字体规则写入frame.md,AI自动生成带品牌元素的促销视频,无需反复调整。

可复用的动效组件

问题:开发团队需要为不同项目重复使用相同的动画效果(如片头、转场),但缺乏统一的渲染框架。

方案:将动画封装为HTML组件(支持GSAP、Lottie等),通过数据属性控制时间轴和轨道,实现跨项目复用和确定性渲染。

示例:制作一个带字幕的代码差异动画组件,在PR演示视频中反复使用,只需替换代码内容。

📊 项目信息

语言
TypeScript
Stars
29,964
Forks
2,821
今日新增
+395
排名
#8
收录
总榜
趋势日期
2026年6月22日
最后推送
2026/6/22

🏷️ 标签

HTML渲染FFmpeg视频生成动画制作AI驱动开源框架开发者工具AI智能体

📸 截图

hyperframes screenshot 1