html-video

在动态视频制作领域，开发者往往需要在 Remotion、Motion Canvas 或 Manim 等不同引擎间切换，学习各自的 DSL 并忍受其局限性。html-video 是一个开源的 HTML 转视频 Meta-Layer，它凌驾于众多渲染引擎之上，通过统一的 render(input, ctx) 契约，让你只需与熟悉的 Coding Agent（如 Claude Code, Cursor, Windsurf 等）对话，即可将文本、文章链接或 GitHub 仓库转化为带有精美动画的真实 MP4 视频。所有渲染均在本地完成，无单次费用，无厂商锁定。

核心亮点：自动化、本地化、模块化

1. Agent 驱动的 Meta-Layer

• 广泛兼容：自动探测并支持 14+ 种 Coding Agent（Open Design/Vela, Windsurf, Trae, Claude Code, Cursor, Codex, Gemini, Grok, Qwen, OpenCode, Copilot, Aider, Hermes, Anthropic API）。
• 智能编排：Agent 负责理解意图、抓取内容、生成故事板（Content-Graph）并填充模板，而渲染引擎只负责执行绘制，两者解耦。

2. 本地真实 MP4 渲染

• Hyperframes 引擎：默认使用无头 Chromium 逐帧录制带动画的 HTML，再通过 ffmpeg (libx264) 编码为高清 MP4。
• 零云端成本：全程在本地机器运行，无需支付昂贵的云端渲染费用，数据隐私完全可控。
• 可选 AI 配乐：集成 MiniMax API，支持生成背景音乐及旁白 TTS，并自动混音导出。

3. 可插拔引擎架构

• 统一接口：未来计划支持 Remotion, Motion Canvas/Revideo, Manim 等引擎。只需编写适配器，即可复用现有的 21+ 精选模板及 Agent 工作流，无需重写业务逻辑。
• 内容优先：支持直接粘贴 微信公众号文章、普通网页链接或 GitHub 仓库，系统自动抓取并扁平化为 Markdown，作为视频生成的真实素材依据。

工作流程：从链接到视频

1. 来源抓取：Studio 服务端拉取 URL 或仓库内容，转换为结构化 Markdown。
2. Agent 循环：Agent 阅读素材，结合所选模板风格，生成 Content-Graph（包含节点、边、帧序及时长的故事板）。
3. 逐帧 HTML 生成：每个节点转化为一个自包含、带动画的 HTML 文件。
4. Hyperframes 渲染：Chromium 加载每帧 HTML 并录制 WebM，ffmpeg 将其拼接并编码为最终 MP4。
5. 音频混合：可选加入 MiniMax 生成的音乐与旁白。

快速开始

1. 前置依赖

• Node.js 20+
• pnpm 9+
• ffmpeg
• Chromium (可通过 npx playwright install chromium 安装)

2. 安装与运行

pnpm install
pnpm -r build

# 启动本地 Studio (http://127.0.0.1:3071)
node packages/cli/dist/bin.js studio

3. CLI 常用命令

# 检测已安装的 Agent 和引擎状态
node packages/cli/dist/bin.js doctor

# 根据意图搜索模板
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

模板与许可

• 21+ 精选模板：涵盖数据可视化（NYT 风格）、产品宣传、社媒短片、解说骨架等。
• 许可清晰：每个模板均附带 SPDX 标识及明确的商用/分发许可说明，确保商业使用无忧。
• Agent 可读：通过 template.html-video.yaml 清单描述输入 Schema，让 Agent 能精准填充内容。

对于需要快速产出解说视频、项目演示或数据可视化的团队而言，html-video 提供了一个高效、透明且完全自主可控的解决方案。