本文介绍GitHub上两个主流的HTML生成视频开源项目。HyperFrames是HeyGen开源的视频渲染框架，支持用HTML+CSS+动画直接生成MP4，内置15个Skill供AI Agent自动调用。html-video则提供21套可商用的视频模板，支持链接转视频和多Agent后端，可本地运行Studio。两个项目均开源，适合开发者、AI应用者和内容创作者实现代码化视频制作。
Tags:
01
HyperFrames
这个是 HeyGen 在今年 4 月开源的视频渲染框架，现在已经 2.5 万多 Star 了。
它让你用写网页的方式来做视频。HTML + CSS + 动画，写完直接渲染成 MP4。
HeyGen 团队你可能没听说过，前两年很火的马斯克说中文、郭德纲说英文的改口型视频，就是它们产品生成的。
开源地址：https://github.com/heygen-com/hyperframes核心思路是：一个 HTML 文件就是一个视频。
你在 HTML 里用 data 属性定义每个元素的出现时间、持续时长和所在轨道，然后用 GSAP 或 CSS 动画控制运动。
HyperFrames 的渲染引擎在无头 Chrome 里逐帧录制，最后用 FFmpeg 合成 MP4。
整个过程完全确定性，同一个 HTML 永远产出同一个视频，没有随机性。
这点对自动化场景特别重要，不怕结果飘。
原生为 AI Agent 设计。
这是它和其他视频框架最大的区别。
HyperFrames 内置了 15 个 Skill，装上之后你可以直接跟 Agent 说"帮我使用 hyperframes skill，做一个逛逛 GitHub 的公众号介绍视频"。
Agent 就会自动写 HTML、加动画、渲染成片。
效果怎么说呢，mmmmm 自己体会一下吧，可能是我的使用方式不对？
不需要 React，不需要打包。
Remotion 也是做代码化视频的，但它要求你用 React 写组件，还得配打包工具。
HyperFrames 选了纯 HTML 路线，一个 index.html 文件浏览器直接打开就能预览，Agent 写起来也更自然，毕竟 HTML 是所有 Agent 都会写的东西。
动画引擎随便选。
GSAP、CSS Animations、Lottie、Three.js、Anime.js、Web Animations API 都能用，通过适配器模式接入。
你熟悉哪个就用哪个，不用新学一套。
内置 Catalog 组件库。
转场效果、数据图表、字幕叠层、社交平台样式这些常用元素都有现成组件，一行命令加到项目里。
还有 Shader 转场，WebGL 级别的视觉效果。
安装也很简单，直接给你的 Agent 发送：帮我安装 hyperframes 这个 skill
装完直接说你想做什么视频就行。
开源地址：https://github.com/heygen-com/hyperframes02
HTML 版剪映，21 套模板
Open Design 团队最近也开源了一个 HTML 视频项目，叫 html-video。
Open Design 就是做 Claude Design 开源平替的那个团队，那个项目在 GitHub 上已经 6 万多 Star 了。
html-video 是他们同一个团队做的，定位是 HTML 版的剪映。
开源地址：https://github.com/nexu-io/html-video和 HyperFrames 不一样的地方在于，HyperFrames 是渲染引擎，你从零开始写 HTML。
html-video 在 HyperFrames 之上又包了一层，重点做了三件事。
21 套精心设计的模板。
涵盖数据可视化、产品宣传、动态排版、电影片头、Logo 片尾各种场景。
每套模板都有 license 清理，可以直接商用，不用担心版权问题。
链接转视频。
你直接丢一篇文章链接或者 GitHub 仓库地址，html-video 会自动抓取内容，用 AI 分析文章结构，拆成多个场景，套上模板渲染成视频。
支持微信公众号文章，对国内用户很友好。
比如你直接贴一个 GitHub 链接生成一个介绍视频。
多 Agent 后端。
支持 Open Design、Claude Code、Codex、Hermes等 Agent，你在 Studio 界面里可以随时切换。
啥都没装的话，配个 Anthropic API Key 也能直接用。
它还有一个本地 Studio 界面，浏览器打开就能选模板、编辑每帧文字、加背景音乐和配音，最后导出 MP4。
整个流程在本地跑，不用上传到云端。
我有试了一个，让他生成苹果公司宣传视频。效果确实比上面那个开源项目好一些。
启动很快：
pnpm installpnpm -r buildnode packages/cli/dist/bin.js studio
打开 http://127.0.0.1:3071 就能用了。
html-video 的架构设计挺有意思，它把渲染引擎做成可插拔的适配器。
现在默认用 HyperFrames 引擎，但 Remotion、Motion Canvas 这些引擎也在路线图上。
也就是说以后换引擎不用重写模板，底层引擎换了，上面的模板和 Agent 工作流都能直接复用。
03
点击下方卡片，关注逛逛 GitHub
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：
没有评论:
发表评论