HTML视频生成

Prerequisites

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:

npx playwright install chromium

Install & run

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio    # opens the studio at http://127.0.0.1:3071

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.

CLI utilities:

node packages/cli/dist/bin.js doctor                 # detect installed agents + engines
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

---

Quick start

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.

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-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.
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.

…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.

---

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:

• 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.

That last part is deliberate. Every template is license-clean by construction: forks carry their original license, the repo-root 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.

---

References & lineage