HTML 转视频是个真实的品类——但每个引擎都有自己的脾气。
Hyperframes、Remotion、Motion Canvas、Manim，每个都要你学它那一套写法。多数团队只能选一个、忍受它的限制。html-video 是凌驾在它们之上的 meta-layer。
html-video — 把 HTML 变成视频，就在你的电脑上.
Open Design 家族里的 HTML 转视频 meta-layer。描述一个视频——或粘贴一篇文章链接、一个 GitHub 仓库——你的本地 agent 就写出多帧 storyboard，给每一帧填上动画 HTML，再用 Hyperframes 引擎渲染成真实 MP4。可插拔引擎、策划过的模板库、可选 AI 配乐。不走云渲染，没有按片计费。
- 924GitHub Star
- 6Coding agent
- 21视频模板
- Hyperframes渲染引擎
- Apache-2.0许可证
为什么需要它
你跟 agent 对话，由它选引擎。
agent 决定 storyboard，引擎决定怎么画——两者互不渗透。引擎只是一个 render() adapter 背后的实现细节。接入一个新后端，所有模板都自动受益。
一个链接进去，一个 MP4 出来——全在本地。
无头 Chromium 逐帧录制动画 HTML，ffmpeg 编码（libx264）。唯一的网络请求是可选的抓取源和可选的配乐。不走云渲染、没有按次计费、不锁定厂商。
工作流程
一句话（或一个链接）进去，一个真实 MP4 出来。无论你从 prompt、文章还是仓库开始，流水线都一样。
- 01
抓取源
粘贴一个 URL 或 GitHub 仓库；studio 在服务端抓取并压平成 Markdown。微信公众号这类服务端渲染页面开箱即用。
- 02
Agent 循环
你的本地 agent 读取素材和所选模板的风格，输出一个 content-graph storyboard——每帧一段动画 HTML。
- 03
Content-graph
多帧中间表示：节点（实体 / 数据 / 文本）+ 边（顺序 / 对比），拓扑排序成帧序和时序。
- 04
逐帧 HTML
每个节点变成磁盘上一段自包含的动画 HTML 帧——这正是 storyboard 与引擎解耦的 meta-layer 所在。
- 05
Hyperframes 渲染
无头 Chromium 加载每一帧并录制，自动延长以覆盖该帧自身的动画 → 每帧一个 webm。
- 06
ffmpeg → 你的.mp4
每个 webm 编码成 MP4（libx264）再拼接成一段视频；导出时可选混入 MiniMax 音乐与旁白。
模板库
每个模板都是真实、可动画的单文件 HTML 视频——是实时渲染，不是效果图。放一个进去，让 agent 填上你的内容，导出 MP4。studio 库里共 21 个，这里展示六个。
-
数据可视化 · NYT 风格图表 -
标题卡 · 故障风 -
主视觉 · 液态渐变 -
电影感 · 漏光 -
VFX · 打字机光标 -
片尾 · logo 尾卡
可插拔渲染引擎
引擎是单一 adapter 接口背后的一个 render(input, ctx) 约定。换引擎，storyboard 和 agent 循环都不动。Hyperframes 今天已可用，其余在路线图上。
Hyperframes 已上线
HTML + CSS + GSAP，由 agent skill 驱动。默认引擎——通过无头 Chromium + ffmpeg 渲染真实 MP4。
Remotion 计划中
React 组件。adapter 接口已为它设计，但适配器尚未实现。
Motion Canvas / Revideo 计划中
canvas 上的 TypeScript 生成器——最适合 code-first 讲解视频。
Manim 调研中
数学 / 3D 优先。小众，但天然契合同一套 adapter。
你能做出什么
一组策划过、许可清晰的模式——按你要讲的故事选一个。
-
数据可视化视频
为"数字涨了"类故事做的编辑式动画图表。
-
产品宣传片
多场景揭示——主视觉、功能、行动号召。
-
社交短视频
适配信息流的竖版动态文字短片。
-
讲解视频
从文章或仓库生成的决策树与概念讲解。
-
片头 & 片尾
故障标题、logo 尾卡、干净的收尾。
-
电影感帧
胶片颗粒、漏光氛围，适合品牌片。
-
动态文字
动画排版——drop、开场、"系统上线"的能量感。
-
仓库导览
把一个 GitHub 项目变成结构化的"这是什么"视频。
自动识别六种 coding agent
html-video 使用你 PATH 上任意一个 agent CLI，可在 studio 顶栏切换。它优先用 Open Design (Vela)——一次登录、多种模型——再回退到第一个可用后端。什么都没装？配一个 Anthropic key，它直接对接 Messages API。
- Open Design (Vela)
- Claude Code
- Cursor Agent
- Codex CLI
- Hermes
- Anthropic API
AI 配乐
给成片加上声音。配一个 MiniMax key，描述一段背景音乐的情绪，或输入一段旁白脚本；两者都会在导出时通过 ffmpeg 混入 MP4（音乐在人声下做 ducking）。没配 key？studio 其余部分照常工作。
快速开始
三条命令：pnpm install、pnpm -r build，然后 html-video studio——会在 127.0.0.1:3071 打开。选一个模板或粘贴链接，跟 agent 对话，编辑每帧文字，加配乐，导出 MP4。全部在你的电脑本地运行。
路线图
已上线
- 可插拔引擎架构
- Hyperframes 引擎 → 真实 MP4
- 文章 / 仓库 → 视频
- 21 个模板库
- 多帧 storyboard
- AI 配乐（MiniMax）
- Studio + CLI
进行中
- Remotion 适配器
- Motion Canvas / Revideo 适配器
调研中
- Manim 适配器
- 同一 render() 约定下接入更多引擎
来自 Open Design 家族
同样的 meta-layer 思路驱动着设计领域的 Open Design——一个凌驾在众多工具之上的 agent 层。html-video 是同团队在动态影像领域的对应物：HTML 进，视频出。