From 3e4add60e0e45f5cae68c21f98fc63e2f18b783e Mon Sep 17 00:00:00 2001 From: wehub-resource-sync Date: Mon, 13 Jul 2026 10:56:25 +0000 Subject: [PATCH] docs: make Chinese README the default --- README.md | 279 +++++++++++++++++++++++++++--------------------------- 1 file changed, 142 insertions(+), 137 deletions(-) diff --git a/README.md b/README.md index a238f81..b8513a9 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,26 @@ + +> [!NOTE] +> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。 +> [English](./README.en.md) · [原始项目](https://github.com/nexu-io/html-video) · [上游 README](https://github.com/nexu-io/html-video/blob/HEAD/README.md) +> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。 + # html-video

- html-video — HTML becomes video, on your laptop + html-video — 在你的电脑上，把 HTML 变成视频

-> **HTML becomes video — on your laptop.** Bring your local coding agent (Open Design · Windsurf CLI · Trae CLI · Claude Code · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · or the Anthropic API). Describe a video, or **paste an article link / GitHub repo**, and the agent turns it into a multi-frame, fully animated video — then renders it to a real MP4 right on your machine. One agent loop, pluggable rendering engines, a curated template gallery, optional AI soundtrack. Apache-2.0, no per-render fees, no vendor lock-in. +> **在你的电脑上，把 HTML 变成视频。** 接上你本地的 coding agent（Open Design · Windsurf CLI · Trae CLI · Claude Code · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · 或 Anthropic API），描述一个视频，或者**直接粘一个文章链接 / GitHub 仓库**，agent 就把它变成一支多帧、带动画的视频 —— 然后就在你这台机器上渲染成真实 MP4。一个 agent 循环、可插拔渲染引擎、精选模板库、可选 AI 配乐。Apache-2.0，无单次渲染费用，不绑定厂商。

License - Agents - Templates - Sources - Soundtrack - Quickstart + Agents + Templates + Sources + Soundtrack + Quickstart

-

Discord Follow @nexudotio on X @@ -23,267 +28,267 @@

- An official project by the Open Design team · open-design.ai + Open Design 团队官方出品 · open-design.ai

-

English · 简体中文

+

English · 简体中文

--- -## Showcase +## 作品展示 -Every template below is a real, animated single-file HTML video — these are live renders, not mockups. Drop one in, let the agent fill it with your content, export to MP4. +下面每个模板都是一支真实、带动画的单文件 HTML 视频 —— 这些是实时渲染截图，不是效果图。挑一个，让 agent 填进你的内容，导出 MP4。 - - + + - - + + - - + + - - + + - - + + - - + +
NYT-style data chartGlitch titleNYT 风格数据图表故障标题
frame-data-chart-nyt · data-viz
Editorial NYT-style animated line chart — headline, annotated data points, source line. For "the number went up" stories.		frame-glitch-title · title card
Chromatic-aberration glitch title with scanlines. For openers, drops, and "system online" energy.		frame-data-chart-nyt · 数据可视化
纽约时报风格的动态折线图 —— 大标题、标注数据点、来源行。适合「数字涨上去了」类叙事。		frame-glitch-title · 标题卡
带色彩偏移与扫描线的故障标题。适合开场、爆点、「系统上线」式的能量感。
Liquid background heroLight leak cinema液态背景主视觉漏光电影感
frame-liquid-bg-hero · hero
Aurora liquid-gradient hero with a centered headline. For product reveals and bold statements.		frame-light-leak-cinema · cinematic
Warm film-grain + light-leak cinematic frame. For mood, brand films, "a quiet year" storytelling.		frame-liquid-bg-hero · 主视觉
极光液态渐变背景 + 居中大标题。适合产品发布与有力的口号。		frame-light-leak-cinema · 电影感
暖色胶片颗粒 + 漏光的电影感画面。适合氛围片、品牌片、叙事短片。
Typewriter cursor VFXLogo outro打字机光标特效Logo 片尾
vfx-text-cursor · VFX
Typewriter text with a blinking terminal cursor. For code-style reveals and CLI demos.		frame-logo-outro · outro
Clean animated logo end card. For sign-offs and brand stamps at the end of any video.		vfx-text-cursor · 特效
打字机文字 + 闪烁的终端光标。适合代码风揭示、CLI 演示。		frame-logo-outro · 片尾
干净的 Logo 动画结束卡。适合任何视频结尾的署名与品牌落版。
-…and 15 more, including multi-scene product promos, kinetic type, Swiss-grid and Vignelli data cards, decision-tree explainers, Takram-organic motion, and warm-grain editorial. Browse all 21 live in the studio gallery. +……还有 15 个，包括多场景产品宣传、动感排版、瑞士网格与 Vignelli 数据卡、决策树解说、Takram 有机动效、暖色颗粒杂志风。全部 21 个都可在 studio 模板库里实时浏览。 --- -## Why this exists +## 为什么做这个 -HTML→Video is a real category — but every engine is opinionated, and each wants you to learn *its* authoring model: +HTML→Video 是个真实存在的品类 —— 但每个引擎都各有主张，且都要你学*它自己*的创作模型： -| Engine | Paradigm | Tradeoff | In html-video | +| 引擎 | 范式 | 取舍 | 在 html-video 中 | |---|---|---|---| -| [Hyperframes](https://github.com/heygen-com/hyperframes) | HTML + CSS + GSAP, agent-skill driven | Single rendering paradigm | ✅ **Shipped** — the default engine; renders real MP4 via headless Chromium + ffmpeg | -| [Remotion](https://www.remotion.dev/) | React components | Source-available, paid above 4 devs | 🗺️ Planned | -| [Motion Canvas](https://github.com/motion-canvas/motion-canvas) · [Revideo](https://github.com/redotvideo/revideo) | TypeScript generators on canvas | Best for explainers, code-first | 🗺️ Planned | -| [Manim](https://github.com/3b1b/manim) & friends | Math / 3D first | Niche | 🗺️ Researching | +| [Hyperframes](https://github.com/heygen-com/hyperframes) | HTML + CSS + GSAP，agent skill 驱动 | 单一渲染范式 | ✅ **已发布** —— 默认引擎；经无头 Chromium + ffmpeg 渲染出真实 MP4 | +| [Remotion](https://www.remotion.dev/) | React 组件 | source-available，4 人以上收费 | 🗺️ 计划中 | +| [Motion Canvas](https://github.com/motion-canvas/motion-canvas) · [Revideo](https://github.com/redotvideo/revideo) | canvas 上的 TypeScript 生成器 | 最适合解说类、代码优先 | 🗺️ 计划中 | +| [Manim](https://github.com/3b1b/manim) 等 | 数学 / 3D 优先 | 小众 | 🗺️ 调研中 | -Picking the right engine per use case, learning each model, and stitching them into one workflow costs real engineering time. Most teams pick one and live with its limits. +按场景挑引擎、学每一种创作模型、再把它们拼成一条工作流，都要耗真实的工程时间。多数团队挑一个、然后忍受它的局限。 -**html-video is the meta-layer that sits above all of them.** You talk to your agent; it picks the engine, picks the template, fills in your content, and renders the video. The engine is an implementation detail behind a single adapter interface — one `render(input, ctx)` contract that any backend can satisfy. Add a new engine and every template, every agent, and the whole studio workflow get it for free. No new DSL to learn, no rewrite when you switch engines. +**html-video 是凌驾于它们之上的 meta-layer。** 你跟 agent 对话，它挑引擎、挑模板、填进你的内容、渲染视频。引擎只是一个适配器接口背后的实现细节 —— 一份 `render(input, ctx)` 契约，任何后端满足它即可接入。加一个新引擎，所有模板、所有 agent、整条 studio 工作流就都自动用上了。不用学新的 DSL，换引擎也不用重写。 -The same idea powers [Open Design](https://github.com/nexu-io/open-design) in the *design* space — an agent meta-layer over many tools. html-video is the *motion* counterpart from the same team. +同一套思路也驱动着 [Open Design](https://github.com/nexu-io/open-design) 在*设计*领域的产品 —— 凌驾于众多工具之上的 agent meta-layer。html-video 是同一团队在*动态视频*这一面的对应物。 -> **Status:** the pluggable-engine architecture is in place, and the **Hyperframes engine is fully wired up and renders real MP4** — headless Chromium records the animated HTML frame-by-frame and ffmpeg encodes it (libx264). Remotion, Motion Canvas / Revideo, and Manim are on the roadmap: the adapter interface is designed for them, but their adapters aren't built yet. The "In html-video" column above is the single source of truth for what's actually runnable today. +> **状态：** 可插拔引擎架构已就位，**Hyperframes 引擎已完整接通、能渲染出真实 MP4** —— 无头 Chromium 逐帧录制带动画的 HTML，再用 ffmpeg 编码（libx264）。Remotion、Motion Canvas / Revideo、Manim 在路线图上：适配器接口已为它们设计好，但适配器本身还没写。上表「在 html-video 中」这一列，是当下真正可运行内容的唯一权威来源。 --- -## At a glance +## 速览 | | | |---|---| -| **Coding agents (14)** | Open Design (Vela) · Windsurf CLI · Trae CLI · Claude Code · Cursor Agent · Codex CLI · Gemini CLI · Grok Build · Qwen Code · OpenCode · GitHub Copilot CLI · Aider · Hermes · Anthropic Messages API — auto-detected on your `PATH`, switchable from the top bar. | -| **Real MP4 render** | Headless Chromium records the animated HTML and ffmpeg encodes it (libx264) — locally, no cloud render, no per-clip fee. | -| **Article / repo → video** | Paste a URL or GitHub repo; the studio fetches it server-side (handles WeChat 公众号 articles) and builds the video from the real content. | -| **21 templates** | Curated, license-clean patterns: data viz, product promos, social shorts, explainers, kinetic type, transitions — previewed live in the gallery. | -| **Multi-frame storyboards** | A content-graph drives multi-scene videos; edit per-frame text inline, reorder, re-render. | -| **AI soundtrack** | Optional background music + narration via MiniMax, mixed into the MP4 at export. | -| **Studio + CLI** | A local browser studio *and* a scriptable `html-video` CLI. | -| **License** | Apache-2.0 — no per-render fees, no seat caps, no contributor agreements. | +| **Coding agent（14 个）** | Open Design (Vela) · Windsurf CLI · Trae CLI · Claude Code · Cursor Agent · Codex CLI · Gemini CLI · Grok Build · Qwen Code · OpenCode · GitHub Copilot CLI · Aider · Hermes · Anthropic Messages API —— 在 `PATH` 上自动探测，顶栏一键切换。 | +| **真实 MP4 渲染** | 无头 Chromium 录制带动画的 HTML，ffmpeg 编码（libx264）—— 全在本地，无云端渲染，无单片费用。 | +| **文章 / 仓库 → 视频** | 粘一个 URL 或 GitHub 仓库；studio 在服务端抓取（支持微信公众号文章），用真实内容生成视频。 | +| **21 个模板** | 精选、许可清晰的样式：数据可视化、产品宣传、社媒短片、解说、动感排版、转场 —— 在模板库里实时预览。 | +| **多帧故事板** | content-graph 驱动多场景视频；逐帧改文案、重排、重渲染。 | +| **AI 配乐** | 可选背景音乐 + 旁白（MiniMax），导出时混进 MP4。 | +| **Studio + CLI** | 一个本地浏览器 studio，外加一个可脚本化的 `html-video` CLI。 | +| **许可** | Apache-2.0 —— 无单次渲染费、无席位上限、无贡献者协议。 | --- -## How it works +## 它如何工作 -One sentence (or one link) goes in; a real MP4 comes out. The pipeline is the same whether you start from a prompt, an article, or a repo: +一句话（或一个链接）进去，一支真实 MP4 出来。不论你从一句 prompt、一篇文章还是一个仓库开始，管线都是同一条： ``` - prompt / link / repo + prompt / 链接 / 仓库 │ ▼ - ① source fetch studio pulls the URL or repo server-side, flattens it to Markdown + ① 来源抓取 studio 在服务端拉取 URL 或仓库，扁平成 Markdown │ ▼ - ② agent loop your agent reads the material + the picked template's style and emits - │ a content-graph (the storyboard) + one HTML block per frame + ② agent 循环 agent 读素材 + 所选模板的风格，产出一份 + │ content-graph（故事板）+ 每帧一个 HTML 块 ▼ - ③ content-graph multi-frame IR — nodes (entity / data / text) + edges (sequence / - │ dependency / contrast); topo-sorted into frame order & timing + ③ content-graph 多帧中间表示 —— 节点（实体 / 数据 / 文本）+ 边（顺序 / + │ 依赖 / 对比）；拓扑排序成帧序与时长 ▼ - ④ per-frame HTML each node becomes a self-contained animated HTML frame on disk + ④ 逐帧 HTML 每个节点变成一个自包含、带动画的 HTML 帧，落到磁盘 │ ▼ - ⑤ Hyperframes render headless Chromium loads each frame, records it (auto-extending to - │ cover the frame's own animation), → webm per frame + ⑤ Hyperframes 渲染 无头 Chromium 加载每一帧并录制（会自动延长时长 + │ 以覆盖该帧自身的动画）→ 每帧一个 webm ▼ - ⑥ ffmpeg each webm → mp4 (libx264), then concat into one video; - │ optional MiniMax music + narration mixed in + ⑥ ffmpeg 每个 webm → mp4（libx264），再 concat 成一支视频； + │ 可选混入 MiniMax 的音乐 + 旁白 ▼ - your.mp4 + 你的.mp4 ``` -Steps ②–④ are where the "meta-layer" lives: the agent decides the storyboard and the engine decides how to draw it, and neither leaks into the other. Step ⑤ is engine-specific — swapping in Remotion or Motion Canvas later replaces only that box, leaving the storyboard and the agent loop untouched. Everything runs on your machine; the only network calls are the optional source fetch and the optional soundtrack. +第 ②–④ 步正是「meta-layer」所在：agent 决定故事板，引擎决定怎么画，两者互不渗透。第 ⑤ 步是引擎相关的 —— 以后换成 Remotion 或 Motion Canvas，只替换这一个环节，故事板和 agent 循环原封不动。全程在你本机运行；唯二的网络调用是可选的来源抓取和可选的配乐。 -Single-frame videos take a fast path that skips the content-graph — one template, one HTML, straight to render. +单帧视频走一条快速路径，跳过 content-graph —— 一个模板、一个 HTML，直接渲染。 --- -## Turn a link into a video +## 把链接变成视频 -This is what most people reach for: hand your agent a link, get a video back. The agents run as local CLIs with no network access of their own, so the studio fetches the source **server-side** and feeds the real content into the generation prompt — no copy-pasting article bodies, and pages behind a login-free server render (like WeChat 公众号) just work. +这是大多数人最想要的用法：丢一个链接给 agent，拿回一支视频。agent 作为本地 CLI 运行、自身没有联网能力，所以 studio 在**服务端**抓取来源、把真实内容喂进生成 prompt —— 不用手动复制正文，像微信公众号这种无需登录的服务端渲染页面也直接能用。 ``` -You: 做一个解读视频 https://mp.weixin.qq.com/s/… -Agent: 好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。 -→ multi-frame explainer, built from the article's actual points +你： 做一个解读视频 https://mp.weixin.qq.com/s/… +Agent：好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。 +→ 一支多帧解说视频，基于文章的真实要点 ``` -- **Web article** → fetched and flattened to Markdown. Server-rendered pages like **WeChat 公众号** articles work out of the box. -- **GitHub repo** → description, top-level structure, and README pulled via the public API — great for "explain this open-source project" videos. -- **Just a prompt** → describe the topic and the agent writes the content from scratch. +- **网页文章** → 抓取并扁平成 Markdown。像**微信公众号**这种服务端渲染的页面开箱即用。 +- **GitHub 仓库** → 通过公开 API 拉取简介、顶层结构、README —— 很适合做「解读某开源项目」的视频。 +- **只给一句话** → 描述主题，agent 从零写内容。 -Whatever the source, it becomes the material the video is actually built from — not decoration around a canned template. The agent reads the fetched content, decides how many scenes it needs, and writes a **content-graph storyboard**: the key points become frames, the relationships between them (this follows that, this contrasts with that) become edges, and the picked template's visual style is applied per frame. So a 1,500-word article turns into a paced multi-scene explainer whose every line traces back to something in the source, and a repo turns into a structured walkthrough of what the project actually is. +无论哪种来源，它都会成为视频真正依据的素材 —— 不是套模板时的摆设。agent 读取抓来的内容，自己决定需要几个场景，写出一份 **content-graph 故事板**：要点变成帧，要点之间的关系（这个承接那个、这个对比那个）变成边，再把所选模板的视觉风格逐帧应用上去。于是一篇 1500 字的文章变成一支有节奏的多场景解说，每一句都能追溯回原文的某处；一个仓库变成一段「这个项目到底是什么」的结构化讲解。 --- -## Quick start +## 快速开始 -### Prerequisites +### 前置依赖 -| Requirement | Minimum | Check | +| 依赖 | 最低版本 | 检查方式 | |---|---|---| | **Node.js** | 20+ | `node --version` | | **pnpm** | 9+ | `pnpm --version` | -| **ffmpeg** | Any recent | `ffmpeg -version` | -| **Chromium** (or Playwright browsers) | — | `npx playwright install chromium` | +| **ffmpeg** | 任意较新版本 | `ffmpeg -version` | +| **Chromium**（或 Playwright 浏览器）| — | `npx playwright install chromium` | -The default rendering engine records animated HTML in a headless Chromium browser, then uses ffmpeg (libx264) to encode MP4. Install Playwright's Chromium if you don't have a system install: +默认渲染引擎用无头 Chromium 录制带动画的 HTML，再用 ffmpeg（libx264）编码为 MP4。如果没有系统安装的 Chromium，装 Playwright 内置的： ```bash npx playwright install chromium ``` -### Install & run +### 安装 & 运行 ```bash pnpm install pnpm -r build -node packages/cli/dist/bin.js studio # opens the studio at http://127.0.0.1:3071 +node packages/cli/dist/bin.js studio # 在 http://127.0.0.1:3071 打开 studio ``` -In the studio: pick a template (or just describe a video / paste a link), chat with your agent, edit per-frame text, add a soundtrack, and export MP4. +在 studio 里：挑一个模板（或直接描述视频 / 粘链接），跟 agent 对话，逐帧改文案，加配乐，导出 MP4。 -CLI utilities: +CLI 工具： ```bash -node packages/cli/dist/bin.js doctor # detect installed agents + engines +node packages/cli/dist/bin.js doctor # 探测已安装的 agent + 引擎 node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3 ``` --- -## Supported agents +## 支持的 Agent -Auto-detected on your `PATH`; switch the active one from the studio's top bar. The studio leads with **Open Design (Vela)** — one login, many models, lower cost — then falls back to the first *available* agent so a fresh project always has a working backend. +在 `PATH` 上自动探测；在 studio 顶栏切换当前 agent。studio 默认把 **Open Design (Vela)** 排在最前 —— 一次登录、多种模型、成本更低 —— 然后回落到第一个*可用*的 agent，保证新项目永远有一个能用的后端。 -| Agent | Detection | Invocation | +| Agent | 探测 | 调用 | |---|---|---| -| **Open Design (Vela)** | `vela` / bundled in the Open Design app | ACP over stdio — one login in Open Design, pick any model | -| **Windsurf CLI** | `windsurf` | `windsurf --yolo`, ACP over stdio | -| **Trae CLI** | `traecli` | `traecli acp serve --yolo`, ACP over stdio | -| **Claude Code** | `claude` | `claude --print`, prompt via stdin | +| **Open Design (Vela)** | `vela` / Open Design 应用内置 | ACP over stdio —— 在 Open Design 里登录一次，任选模型 | +| **Windsurf CLI** | `windsurf` | `windsurf --yolo`，ACP over stdio | +| **Trae CLI** | `traecli` | `traecli acp serve --yolo`，ACP over stdio | +| **Claude Code** | `claude` | `claude --print`，prompt 走 stdin | | **Cursor Agent** | `cursor-agent` | `cursor-agent --print` | -| **Codex CLI** | `codex` | `codex exec`, prompt via stdin | +| **Codex CLI** | `codex` | `codex exec`，prompt 走 stdin | | **Hermes** | `hermes` | Hermes ACP CLI | -| **Gemini CLI** | `gemini` | Prompt via stdin | +| **Gemini CLI** | `gemini` | prompt 走 stdin | | **Grok Build** | `grok` | `grok -p ` | -| **Qwen Code** | `qwen` | Prompt via stdin | -| **OpenCode** | `opencode` | `opencode run`, prompt via stdin | -| **GitHub Copilot CLI** | `copilot` | `copilot --allow-all-tools`, prompt via stdin | +| **Qwen Code** | `qwen` | prompt 走 stdin | +| **OpenCode** | `opencode` | `opencode run`，prompt 走 stdin | +| **GitHub Copilot CLI** | `copilot` | `copilot --allow-all-tools`，prompt 走 stdin | | **Aider** | `aider` | `aider --message ` | -| **Anthropic API** | BYOK | Direct Messages API — works with no CLI installed | +| **Anthropic API** | BYOK | 直连 Messages API —— 不装任何 CLI 也能用 | -Nothing installed? Set an Anthropic key and the studio talks to the Messages API directly. +什么都没装？配一个 Anthropic key，studio 直接走 Messages API。 --- -## Soundtrack +## 配乐 -Give the finished video a voice. In **Settings → Audio**, add a MiniMax API key, then in the per-project **Soundtrack** panel: +给成片加上声音。在 **Settings → Audio** 填入 MiniMax API key，然后在每个项目的 **Soundtrack** 面板： -- **Background music** — describe a mood (`calm cinematic ambient, slow build`); MiniMax generates an instrumental track. -- **Narration** — type a script; MiniMax reads it (TTS). +- **背景音乐** —— 描述一种情绪（`舒缓的电影感氛围，缓慢推进`），MiniMax 生成一段器乐。 +- **旁白** —— 输入文案，MiniMax 朗读（TTS）。 -Both are mixed into the exported MP4 (music ducked under the voice, optional fade-in/out) via ffmpeg. No key configured? The rest of the studio works unchanged. +两者都会通过 ffmpeg 混进导出的 MP4（音乐压低到人声之下，可选淡入淡出）。没配 key？studio 其余部分照常工作。 --- -## Template gallery +## 模板库 -The 21 templates aren't a random grab-bag — each one is a self-contained, agent-readable unit described by a `template.html-video.yaml` manifest the studio scans at startup. A manifest carries everything the agent needs to pick and drive the template without opening the HTML: +这 21 个模板不是随手凑的一堆 —— 每一个都是自包含、agent 可读的单元，由一份 `template.html-video.yaml` 清单描述，studio 启动时扫描加载。一份清单带齐了 agent 挑选和驱动这个模板所需的一切，根本不用打开 HTML： -- **What it's for** — `category`, `tags`, and a `best_for` list (e.g. *"Corporate slide"*, *"Minimal report card"*) that `search-templates` matches your intent against. -- **What it outputs** — supported resolutions, aspect ratios, fps, duration bounds, whether it has an alpha channel or audio. -- **What goes in** — an `inputs` JSON schema, so the agent knows exactly which text/data slots to fill. -- **License provenance** — an SPDX id plus explicit `attribution_required` / `redistribution_allowed` / `commercial_use` flags, and an `assets_attribution` block pointing at the upstream source URL. +- **它用来做什么** —— `category`、`tags`，外加一个 `best_for` 清单（如*「企业幻灯片」*、*「极简报告卡」*），`search-templates` 拿你的意图去匹配它。 +- **它输出什么** —— 支持的分辨率、画幅比、fps、时长上下限、是否有 alpha 通道或音频。 +- **要喂什么进去** —— 一份 `inputs` JSON schema，让 agent 精确知道要填哪些文本 / 数据槽位。 +- **许可来源** —— 一个 SPDX 标识，外加明确的 `attribution_required` / `redistribution_allowed` / `commercial_use` 标志，以及一个指向上游来源 URL 的 `assets_attribution` 块。 -That last part is deliberate. Every template is **license-clean by construction**: forks carry their original license, the repo-root [`NOTICE.md`](templates/NOTICE.md) records each source and SPDX, and nothing without a clear permissive license ships. So you can put any of them in commercial work without an audit. Templates span data viz (NYT-style charts, Swiss/Vignelli grids), titles & VFX (glitch, kinetic type, typewriter cursor), heroes & cinematics (liquid gradients, light-leak, warm grain), product promos (15s / 30s multi-scene), and explainer scaffolds (decision trees) — and the format is open, so community templates drop in the same way. +最后这一点是刻意为之。每个模板都**从构造上就许可清晰**：fork 来的保留其原始许可，仓库根的 [`NOTICE.md`](templates/NOTICE.md) 记下每个来源与 SPDX，没有清晰宽松许可的一律不收。所以你可以把其中任何一个放进商业作品里，无需再做审查。模板覆盖数据可视化（NYT 风格图表、Swiss / Vignelli 网格）、标题与特效（故障、动感排版、打字机光标）、主视觉与电影感（液态渐变、漏光、暖色颗粒）、产品宣传（15 秒 / 30 秒多场景）、解说骨架（决策树）—— 而且格式是开放的，社区模板用同样的方式接入。 --- -## Architecture +## 架构 ``` packages/ -├── core/ Project / Asset / ContentGraph types, registries, orchestrator, -│ MiniMax provider + ffmpeg audio mux -├── content-graph/ Multi-frame storyboard IR (nodes + edges, topo-sort) -│ runtime/ Agent runtime — detect / spawn / stream -│ (Open Design/Vela · Windsurf CLI · Trae CLI · Claude · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · Anthropic API) -├── adapter-hyperframes/ Hyperframes engine adapter — real render via Chromium + ffmpeg -├── cli/ `html-video` command + the studio HTTP server + source fetching -└── project-studio/ Browser studio UI (chat, template gallery, frames, soundtrack, export) -templates/ 21 curated, license-clean video templates -research/ RFCs (engine adapter / template metadata / agent skill / content-graph) +├── core/ Project / Asset / ContentGraph 类型、registry、orchestrator、 +│ MiniMax provider + ffmpeg 音轨混合 +├── content-graph/ 多帧故事板中间表示（节点 + 边，拓扑排序） +│ runtime/ Agent 运行时 —— 探测 / spawn / 流式 +│ （Open Design/Vela · Windsurf CLI · Trae CLI · Claude · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · Anthropic API） +├── adapter-hyperframes/ Hyperframes 引擎适配器 —— 经 Chromium + ffmpeg 真实渲染 +├── cli/ `html-video` 命令 + studio HTTP server + 来源抓取 +└── project-studio/ 浏览器 studio UI（对话、模板库、帧、配乐、导出） +templates/ 21 个精选、许可清晰的视频模板 +research/ RFC（引擎适配器 / 模板元数据 / agent skill / content-graph） ``` --- -## Roadmap +## 路线图 -- [x] Engine adapter spec — one interface, N backends -- [x] Template metadata format — license-first, agent-readable -- [x] Multi-frame storyboard workflow (content-graph) -- [x] Studio: live template gallery, agent switcher, per-frame text editing -- [x] Source material: article / GitHub-repo → video -- [x] AI soundtrack (MiniMax music + narration), mixed at export -- [x] Real MP4 render — Hyperframes engine via headless Chromium + ffmpeg -- [x] Agent model selection — Open Design (Vela) backend, live model catalog -- [ ] Adapters for Remotion / Motion Canvas / Revideo -- [ ] Agent skill packages + a template marketplace +- [x] 引擎适配器规范 —— 一个接口，N 个后端 +- [x] 模板元数据格式 —— 许可优先、agent 可读 +- [x] 多帧故事板工作流（content-graph） +- [x] Studio：实时模板库、agent 切换器、逐帧改文案 +- [x] 来源素材：文章 / GitHub 仓库 → 视频 +- [x] AI 配乐（MiniMax 音乐 + 旁白），导出时混合 +- [x] 真实 MP4 渲染 —— Hyperframes 引擎经无头 Chromium + ffmpeg +- [x] Agent 模型选择 —— Open Design (Vela) 后端，实时模型目录 +- [ ] Remotion / Motion Canvas / Revideo 适配器 +- [ ] Agent skill 包 + 模板市场 --- -## References & lineage +## 参考与渊源 -| Project | Role here | +| 项目 | 在这里的角色 | |---|---| -| [Open Design](https://github.com/nexu-io/open-design) | Sister project — the design-agent meta-layer; same team, shared philosophy | -| [HTML Anything](https://github.com/nexu-io/html-anything) | Sister project — HTML for *static* deliverables; html-video is the *motion* side | -| [Hyperframes](https://github.com/heygen-com/hyperframes) | The shipped engine adapter; the HTML+CSS+GSAP rendering paradigm and the source of several Apache-2.0 templates | +| [Open Design](https://github.com/nexu-io/open-design) | 姊妹项目 —— 设计 agent meta-layer；同一团队、同一理念 | +| [HTML Anything](https://github.com/nexu-io/html-anything) | 姊妹项目 —— 面向*静态*交付物的 HTML；html-video 是*动态*那一面 | +| [Hyperframes](https://github.com/heygen-com/hyperframes) | 已发布的引擎适配器；HTML+CSS+GSAP 渲染范式，也是若干 Apache-2.0 模板的来源 | -## License +## 许可 [Apache-2.0](LICENSE) -## Built by +## 出品 -[nexu-io](https://github.com/nexu-io) — the team behind [Open Design](https://github.com/nexu-io/open-design). Join the [Discord](https://github.com/nexu-io/open-design#community) · follow [@nexudotio](https://x.com/nexudotio). +[nexu-io](https://github.com/nexu-io) —— [Open Design](https://github.com/nexu-io/open-design) 背后的团队。加入 [Discord](https://github.com/nexu-io/open-design#community) · 关注 [@nexudotio](https://x.com/nexudotio)。