大家好今天给大家分享 HeyGen 开源的HyperFrames—— 一款用 HTML 写视频、一键渲染 MP4、原生支持 AI 智能体的前端级视频渲染框架彻底告别传统剪辑软件让代码化视频生产变得简单高效。项目地址https://github.com/heygen-com/hyperframes官方文档https://hyperframes.heygen.com/introduction一、项目定位Write HTML. Render video. Built for agents.HyperFrames 是HeyGen推出的开源视频渲染框架核心定位用标准HTMLCSSGSAP描述视频 composition浏览器实时预览命令行一键导出MP4AI Agent 原生友好Claude/Cursor/Codex/Gemini 可直接生成合规视频代码确定性渲染相同输入 完全相同输出适合自动化流水线一句话总结把视频当前端页面开发让 AI 和代码接管视频生产。二、核心优势1. HTML 原生零学习成本不用 React、不用专属 DSL纯 HTMLCSSJS 即可开发自带data-*属性声明时间轴、图层、时长像写网页一样做视频无构建步骤index.html直接运行开箱即用2. AI 智能体深度适配提供官方 Skills一行命令让 AI 学会视频创作支持/hyperframes/hyperframes-cli/gsap等斜杠指令AI 可直接生成字幕、动画、转场、数据图表全程自然语言交互3. 确定性渲染自动化友好基于 Headless Chrome FFmpeg帧级精确可控非交互式 CLI 设计完美融入 CI/CD、批量生成、定时产出等自动化场景支持 TTS、语音转文字、背景移除等媒体预处理4. 强大动画生态原生兼容 GSAP、Anime.js、CSS Animations、Lottie、Three.js、WAAPI帧精确 seek时间线可暂停、可跳转渲染稳定不掉帧50 现成组件转场、社交挂件、数据图表、视觉特效5. 完全开源商用友好协议Apache-2.0OSI 认证无渲染费、无席位限制、无公司规模门槛商用零顾虑对比 Remotion纯开源 vs 源码可用对企业更友好三、HyperFrames vs Remotion 核心对比表格对比项HyperFramesRemotion编写方式HTML CSS GSAPReact (TSX) 组件构建步骤无直接运行 HTML需要打包动画库帧精确、可 seek墙钟时间运行HTML 直通直接粘贴使用需转为 JSX开源协议Apache-2.0 完全开源自定义协议小规模免费分布式渲染单机支持 Lambda 生产级四、快速上手2 种方式方式 1AI 智能体一键创作推荐# 安装HyperFrames技能 npx skills add heygen-com/hyperframes然后在 AI 工具中直接用自然语言生成使用/hyperframes创建 10 秒产品介绍视频把 PDF 转为 45 秒讲解视频把 CSV 生成动态条形竞赛图调整字体、颜色、动画、字幕全程自然语言交互方式 2手动命令行创建# 初始化项目 npx hyperframes init my-video cd my-video # 浏览器实时预览 npx hyperframes preview # 渲染输出MP4 npx hyperframes render依赖Node.js ≥22、FFmpeg五、核心代码示例HTML 写视频div idstage data-composition-idmy-video data-start0 data-width1920 data-height1080 !-- 视频片段 -- video data-start0 data-duration5 srcbg.mp4 muted/video !-- 图片叠加 -- img classclip data-start2 data-duration3 srclogo.png !-- 音频 -- audio data-start0 data-duration10 data-volume0.5 srcbgm.wav /divdata-start开始时间秒data-duration持续时长data-track-index图层顺序classclip标记为视频元素由框架控制显隐六、完整能力清单核心包hyperframesCLI 工具init/preview/render/linthyperframes/core核心解析、类型、运行时hyperframes/enginePuppeteerFFmpeg 渲染引擎hyperframes/studio浏览器可视化编辑器hyperframes/player可嵌入 Web 组件hyperframes/shader-transitionsWebGL 转场库AI Skills 能力视频创作、CLI 操作、媒体处理组件安装、网页转视频、Remotion 迁移GSAP/Anime.js/Lottie/Three.js 动画适配七、适用场景产品宣传短视频、功能演示数据可视化、动态报表、条形竞赛图自媒体封面、短视频字幕动画AI 自动化批量生成信息流广告企业内部培训、课程讲解视频智能体输出可视化结果、数字人播报视频八、总结HyperFrames 重新定义代码化视频生产用前端最熟悉的 HTML 体系做视频深度拥抱 AI 智能体确定性渲染、零构建成本、完全开源商用非常适合前端开发者、AI 工程师、内容创作者、运营人员快速落地视频自动化生产。未来随着 AI 能力增强HyperFrames 将成为AI 视频生产基础设施让每个人都能用自然语言 代码高效产出高质量视频。我会持续分享 AI 工具、前端效率、自动化视频开发干货欢迎关注交流
HyperFrames：写 HTML 就能渲染视频，专为 AI 智能体打造的开源渲染框架
发布时间：2026/5/25 16:35:59
大家好今天给大家分享 HeyGen 开源的HyperFrames—— 一款用 HTML 写视频、一键渲染 MP4、原生支持 AI 智能体的前端级视频渲染框架彻底告别传统剪辑软件让代码化视频生产变得简单高效。项目地址https://github.com/heygen-com/hyperframes官方文档https://hyperframes.heygen.com/introduction一、项目定位Write HTML. Render video. Built for agents.HyperFrames 是HeyGen推出的开源视频渲染框架核心定位用标准HTMLCSSGSAP描述视频 composition浏览器实时预览命令行一键导出MP4AI Agent 原生友好Claude/Cursor/Codex/Gemini 可直接生成合规视频代码确定性渲染相同输入 完全相同输出适合自动化流水线一句话总结把视频当前端页面开发让 AI 和代码接管视频生产。二、核心优势1. HTML 原生零学习成本不用 React、不用专属 DSL纯 HTMLCSSJS 即可开发自带data-*属性声明时间轴、图层、时长像写网页一样做视频无构建步骤index.html直接运行开箱即用2. AI 智能体深度适配提供官方 Skills一行命令让 AI 学会视频创作支持/hyperframes/hyperframes-cli/gsap等斜杠指令AI 可直接生成字幕、动画、转场、数据图表全程自然语言交互3. 确定性渲染自动化友好基于 Headless Chrome FFmpeg帧级精确可控非交互式 CLI 设计完美融入 CI/CD、批量生成、定时产出等自动化场景支持 TTS、语音转文字、背景移除等媒体预处理4. 强大动画生态原生兼容 GSAP、Anime.js、CSS Animations、Lottie、Three.js、WAAPI帧精确 seek时间线可暂停、可跳转渲染稳定不掉帧50 现成组件转场、社交挂件、数据图表、视觉特效5. 完全开源商用友好协议Apache-2.0OSI 认证无渲染费、无席位限制、无公司规模门槛商用零顾虑对比 Remotion纯开源 vs 源码可用对企业更友好三、HyperFrames vs Remotion 核心对比表格对比项HyperFramesRemotion编写方式HTML CSS GSAPReact (TSX) 组件构建步骤无直接运行 HTML需要打包动画库帧精确、可 seek墙钟时间运行HTML 直通直接粘贴使用需转为 JSX开源协议Apache-2.0 完全开源自定义协议小规模免费分布式渲染单机支持 Lambda 生产级四、快速上手2 种方式方式 1AI 智能体一键创作推荐# 安装HyperFrames技能 npx skills add heygen-com/hyperframes然后在 AI 工具中直接用自然语言生成使用/hyperframes创建 10 秒产品介绍视频把 PDF 转为 45 秒讲解视频把 CSV 生成动态条形竞赛图调整字体、颜色、动画、字幕全程自然语言交互方式 2手动命令行创建# 初始化项目 npx hyperframes init my-video cd my-video # 浏览器实时预览 npx hyperframes preview # 渲染输出MP4 npx hyperframes render依赖Node.js ≥22、FFmpeg五、核心代码示例HTML 写视频div idstage data-composition-idmy-video data-start0 data-width1920 data-height1080 !-- 视频片段 -- video data-start0 data-duration5 srcbg.mp4 muted/video !-- 图片叠加 -- img classclip data-start2 data-duration3 srclogo.png !-- 音频 -- audio data-start0 data-duration10 data-volume0.5 srcbgm.wav /divdata-start开始时间秒data-duration持续时长data-track-index图层顺序classclip标记为视频元素由框架控制显隐六、完整能力清单核心包hyperframesCLI 工具init/preview/render/linthyperframes/core核心解析、类型、运行时hyperframes/enginePuppeteerFFmpeg 渲染引擎hyperframes/studio浏览器可视化编辑器hyperframes/player可嵌入 Web 组件hyperframes/shader-transitionsWebGL 转场库AI Skills 能力视频创作、CLI 操作、媒体处理组件安装、网页转视频、Remotion 迁移GSAP/Anime.js/Lottie/Three.js 动画适配七、适用场景产品宣传短视频、功能演示数据可视化、动态报表、条形竞赛图自媒体封面、短视频字幕动画AI 自动化批量生成信息流广告企业内部培训、课程讲解视频智能体输出可视化结果、数字人播报视频八、总结HyperFrames 重新定义代码化视频生产用前端最熟悉的 HTML 体系做视频深度拥抱 AI 智能体确定性渲染、零构建成本、完全开源商用非常适合前端开发者、AI 工程师、内容创作者、运营人员快速落地视频自动化生产。未来随着 AI 能力增强HyperFrames 将成为AI 视频生产基础设施让每个人都能用自然语言 代码高效产出高质量视频。我会持续分享 AI 工具、前端效率、自动化视频开发干货欢迎关注交流
