[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-83147":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},83147,"html-video","nexu-io\u002Fhtml-video","nexu-io","Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.",null,"HTML",2811,322,7,9,0,133,1580,835,29.53,"Apache License 2.0",false,"main",[],"2026-06-12 02:04:31","# html-video\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Fhero.png\" alt=\"html-video — HTML becomes video, on your laptop\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n> **HTML becomes video — on your laptop.** Bring your local coding agent (Open Design · Claude Code · Cursor · Codex · Hermes · or the Anthropic API). Describe a video, or **paste an article link \u002F 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.\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"LICENSE\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#supported-agents\">\u003Cimg alt=\"Agents\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fagents-6%20backends-111?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#showcase\">\u003Cimg alt=\"Templates\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftemplates-21-3ce6ac?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#turn-a-link-into-a-video\">\u003Cimg alt=\"Sources\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ffrom-article%20%C2%B7%20repo%20%C2%B7%20prompt-9b59b6?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#soundtrack\">\u003Cimg alt=\"Soundtrack\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fsoundtrack-AI%20music%20%2B%20narration-e67e22?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#quick-start\">\u003Cimg alt=\"Quickstart\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fquickstart-3%20commands-22a34a?style=flat-square\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003C!-- Built by the team behind Open Design — these link to its community on purpose. -->\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design#community\">\u003Cimg alt=\"Discord\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdiscord-join-5865f2?style=flat-square&logo=discord&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fx.com\u002Fnexudotio\">\u003Cimg alt=\"Follow @nexudotio on X\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ffollow-%40nexudotio-000000?style=flat-square&logo=x&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\">\u003Cimg alt=\"By the Open Design team\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fby-nexu--io%2Fopen--design-ff7043?style=flat-square&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Cb>English\u003C\u002Fb> · \u003Ca href=\"README.zh-CN.md\">简体中文\u003C\u002Fa>\u003C\u002Fp>\n\n---\n\n## Showcase\n\nEvery 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.\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fframe-data-chart-nyt.png\" alt=\"NYT-style data chart\" \u002F>\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fframe-glitch-title.png\" alt=\"Glitch title\" \u002F>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>frame-data-chart-nyt\u003C\u002Fb> · data-viz\u003Cbr\u002F>Editorial NYT-style animated line chart — headline, annotated data points, source line. For \"the number went up\" stories.\u003C\u002Ftd>\n\u003Ctd>\u003Cb>frame-glitch-title\u003C\u002Fb> · title card\u003Cbr\u002F>Chromatic-aberration glitch title with scanlines. For openers, drops, and \"system online\" energy.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fframe-liquid-bg-hero.png\" alt=\"Liquid background hero\" \u002F>\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fframe-light-leak-cinema.png\" alt=\"Light leak cinema\" \u002F>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>frame-liquid-bg-hero\u003C\u002Fb> · hero\u003Cbr\u002F>Aurora liquid-gradient hero with a centered headline. For product reveals and bold statements.\u003C\u002Ftd>\n\u003Ctd>\u003Cb>frame-light-leak-cinema\u003C\u002Fb> · cinematic\u003Cbr\u002F>Warm film-grain + light-leak cinematic frame. For mood, brand films, \"a quiet year\" storytelling.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fvfx-text-cursor.png\" alt=\"Typewriter cursor VFX\" \u002F>\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"docs\u002Fassets\u002Ftemplates\u002Fframe-logo-outro.png\" alt=\"Logo outro\" \u002F>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cb>vfx-text-cursor\u003C\u002Fb> · VFX\u003Cbr\u002F>Typewriter text with a blinking terminal cursor. For code-style reveals and CLI demos.\u003C\u002Ftd>\n\u003Ctd>\u003Cb>frame-logo-outro\u003C\u002Fb> · outro\u003Cbr\u002F>Clean animated logo end card. For sign-offs and brand stamps at the end of any video.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n…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.\n\n---\n\n## Why this exists\n\nHTML→Video is a real category — but every engine is opinionated, and each wants you to learn *its* authoring model:\n\n| Engine | Paradigm | Tradeoff | In html-video |\n|---|---|---|---|\n| [Hyperframes](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes) | HTML + CSS + GSAP, agent-skill driven | Single rendering paradigm | ✅ **Shipped** — the default engine; renders real MP4 via headless Chromium + ffmpeg |\n| [Remotion](https:\u002F\u002Fwww.remotion.dev\u002F) | React components | Source-available, paid above 4 devs | 🗺️ Planned |\n| [Motion Canvas](https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fmotion-canvas) · [Revideo](https:\u002F\u002Fgithub.com\u002Fredotvideo\u002Frevideo) | TypeScript generators on canvas | Best for explainers, code-first | 🗺️ Planned |\n| [Manim](https:\u002F\u002Fgithub.com\u002F3b1b\u002Fmanim) & friends | Math \u002F 3D first | Niche | 🗺️ Researching |\n\nPicking 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.\n\n**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.\n\nThe same idea powers [Open Design](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design) in the *design* space — an agent meta-layer over many tools. html-video is the *motion* counterpart from the same team.\n\n> **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 \u002F 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.\n\n---\n\n## At a glance\n\n| | |\n|---|---|\n| **Coding agents (6)** | Open Design (Vela) · Claude Code · Cursor Agent · Codex CLI · Hermes · Anthropic Messages API — auto-detected on your `PATH`, switchable from the top bar. |\n| **Real MP4 render** | Headless Chromium records the animated HTML and ffmpeg encodes it (libx264) — locally, no cloud render, no per-clip fee. |\n| **Article \u002F 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. |\n| **21 templates** | Curated, license-clean patterns: data viz, product promos, social shorts, explainers, kinetic type, transitions — previewed live in the gallery. |\n| **Multi-frame storyboards** | A content-graph drives multi-scene videos; edit per-frame text inline, reorder, re-render. |\n| **AI soundtrack** | Optional background music + narration via MiniMax, mixed into the MP4 at export. |\n| **Studio + CLI** | A local browser studio *and* a scriptable `html-video` CLI. |\n| **License** | Apache-2.0 — no per-render fees, no seat caps, no contributor agreements. |\n\n---\n\n## How it works\n\nOne 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:\n\n```\n  prompt \u002F link \u002F repo\n        │\n        ▼\n  ① source fetch        studio pulls the URL or repo server-side, flattens it to Markdown\n        │\n        ▼\n  ② agent loop          your agent reads the material + the picked template's style and emits\n        │               a content-graph (the storyboard) + one HTML block per frame\n        ▼\n  ③ content-graph       multi-frame IR — nodes (entity \u002F data \u002F text) + edges (sequence \u002F\n        │               dependency \u002F contrast); topo-sorted into frame order & timing\n        ▼\n  ④ per-frame HTML      each node becomes a self-contained animated HTML frame on disk\n        │\n        ▼\n  ⑤ Hyperframes render  headless Chromium loads each frame, records it (auto-extending to\n        │               cover the frame's own animation), → webm per frame\n        ▼\n  ⑥ ffmpeg              each webm → mp4 (libx264), then concat into one video;\n        │               optional MiniMax music + narration mixed in\n        ▼\n      your.mp4\n```\n\nSteps ②–④ 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.\n\nSingle-frame videos take a fast path that skips the content-graph — one template, one HTML, straight to render.\n\n---\n\n## Turn a link into a video\n\nThis 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.\n\n```\nYou:   做一个解读视频  https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002F…\nAgent: 好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。\n→      multi-frame explainer, built from the article's actual points\n```\n\n- **Web article** → fetched and flattened to Markdown. Server-rendered pages like **WeChat 公众号** articles work out of the box.\n- **GitHub repo** → description, top-level structure, and README pulled via the public API — great for \"explain this open-source project\" videos.\n- **Just a prompt** → describe the topic and the agent writes the content from scratch.\n\nWhatever 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.\n\n---\n\n## Quick start\n\n```bash\npnpm install\npnpm -r build\nnode packages\u002Fcli\u002Fdist\u002Fbin.js studio    # opens the studio at http:\u002F\u002F127.0.0.1:3071\n```\n\nIn the studio: pick a template (or just describe a video \u002F paste a link), chat with your agent, edit per-frame text, add a soundtrack, and export MP4.\n\nCLI utilities:\n\n```bash\nnode packages\u002Fcli\u002Fdist\u002Fbin.js doctor                 # detect installed agents + engines\nnode packages\u002Fcli\u002Fdist\u002Fbin.js search-templates --intent \"github stars race\" --top 3\n```\n\n---\n\n## Supported agents\n\nAuto-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.\n\n| Agent | Detection | Invocation |\n|---|---|---|\n| **Open Design (Vela)** | `vela` \u002F bundled in the Open Design app | ACP over stdio — one login in Open Design, pick any model |\n| **Claude Code** | `claude` | `claude --print`, prompt via stdin |\n| **Cursor Agent** | `cursor-agent` | `cursor-agent --print` |\n| **Codex CLI** | `codex` | `codex exec`, prompt via stdin |\n| **Hermes** | `hermes` | Hermes ACP CLI |\n| **Anthropic API** | BYOK | Direct Messages API — works with no CLI installed |\n\nNothing installed? Set an Anthropic key and the studio talks to the Messages API directly.\n\n---\n\n## Soundtrack\n\nGive the finished video a voice. In **Settings → Audio**, add a MiniMax API key, then in the per-project **Soundtrack** panel:\n\n- **Background music** — describe a mood (`calm cinematic ambient, slow build`); MiniMax generates an instrumental track.\n- **Narration** — type a script; MiniMax reads it (TTS).\n\nBoth are mixed into the exported MP4 (music ducked under the voice, optional fade-in\u002Fout) via ffmpeg. No key configured? The rest of the studio works unchanged.\n\n---\n\n## Template gallery\n\nThe 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:\n\n- **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.\n- **What it outputs** — supported resolutions, aspect ratios, fps, duration bounds, whether it has an alpha channel or audio.\n- **What goes in** — an `inputs` JSON schema, so the agent knows exactly which text\u002Fdata slots to fill.\n- **License provenance** — an SPDX id plus explicit `attribution_required` \u002F `redistribution_allowed` \u002F `commercial_use` flags, and an `assets_attribution` block pointing at the upstream source URL.\n\nThat last part is deliberate. Every template is **license-clean by construction**: forks carry their original license, the repo-root [`NOTICE.md`](templates\u002FNOTICE.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\u002FVignelli grids), titles & VFX (glitch, kinetic type, typewriter cursor), heroes & cinematics (liquid gradients, light-leak, warm grain), product promos (15s \u002F 30s multi-scene), and explainer scaffolds (decision trees) — and the format is open, so community templates drop in the same way.\n\n---\n\n## Architecture\n\n```\npackages\u002F\n├── core\u002F                  Project \u002F Asset \u002F ContentGraph types, registries, orchestrator,\n│                          MiniMax provider + ffmpeg audio mux\n├── content-graph\u002F         Multi-frame storyboard IR (nodes + edges, topo-sort)\n├── runtime\u002F               Agent runtime — detect \u002F spawn \u002F stream\n│                          (Open Design\u002FVela · Claude · Cursor · Codex · Hermes · Anthropic API)\n├── adapter-hyperframes\u002F   Hyperframes engine adapter — real render via Chromium + ffmpeg\n├── cli\u002F                   `html-video` command + the studio HTTP server + source fetching\n└── project-studio\u002F        Browser studio UI (chat, template gallery, frames, soundtrack, export)\ntemplates\u002F                 21 curated, license-clean video templates\nresearch\u002F                  RFCs (engine adapter \u002F template metadata \u002F agent skill \u002F content-graph)\n```\n\n---\n\n## Roadmap\n\n- [x] Engine adapter spec — one interface, N backends\n- [x] Template metadata format — license-first, agent-readable\n- [x] Multi-frame storyboard workflow (content-graph)\n- [x] Studio: live template gallery, agent switcher, per-frame text editing\n- [x] Source material: article \u002F GitHub-repo → video\n- [x] AI soundtrack (MiniMax music + narration), mixed at export\n- [x] Real MP4 render — Hyperframes engine via headless Chromium + ffmpeg\n- [x] Agent model selection — Open Design (Vela) backend, live model catalog\n- [ ] Adapters for Remotion \u002F Motion Canvas \u002F Revideo\n- [ ] Agent skill packages + a template marketplace\n\n---\n\n## References & lineage\n\n| Project | Role here |\n|---|---|\n| [Open Design](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design) | Sister project — the design-agent meta-layer; same team, shared philosophy |\n| [HTML Anything](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything) | Sister project — HTML for *static* deliverables; html-video is the *motion* side |\n| [Hyperframes](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes) | The shipped engine adapter; the HTML+CSS+GSAP rendering paradigm and the source of several Apache-2.0 templates |\n\n## License\n\n[Apache-2.0](LICENSE)\n\n## Built by\n\n[nexu-io](https:\u002F\u002Fgithub.com\u002Fnexu-io) — the team behind [Open Design](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design). Join the [Discord](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design#community) · follow [@nexudotio](https:\u002F\u002Fx.com\u002Fnexudotio).\n","html-video 是一个将 HTML、CSS 和数据转换为真实 MP4 视频的编程工具。其核心功能包括支持多种编码代理（如 Claude Code、Cursor 等），能够通过简单的描述或粘贴文章链接\u002FGitHub 仓库地址，自动生成多帧动画视频，并在本地渲染为 MP4 文件。该项目提供了21种模板和可插拔的渲染引擎选择，还支持AI生成的音乐和旁白。适用于需要快速将网页内容或数据可视化结果转化为视频演示的场景，如技术分享、产品介绍等。采用Apache-2.0许可证，无每次渲染费用，避免了供应商锁定问题。",2,"2026-06-11 04:10:16","CREATED_QUERY"]