HTML Video Studio
A local agent workflow that turns HTML, CSS, and source material into MP4 video.
Per-dimension scores and reasoning
Evidence shows: The repository declares Apache-2.0 license and explicitly states that all operations run locally, with the only network calls being optional source fetch and soundtrack generation. However, no specific implementation details for least privilege, such as sandboxing or network restrictions, are provided. User confirmation: README mentions user interaction via chat interface, but does not explicitly state whether critical operations (e.g., render, export) require user confirmation. Data flow transparency is good, README details the pipeline from input to output, including source fetch, agent loop, content graph, rendering, and encoding. Sensitive data handling: mentions optional MiniMax API key, but does not explain how it is stored or protected. Dependency security: package.json lists dependencies, but no vulnerability scanning or lock file information is provided. External effects: explicitly states local rendering, but does not mention restrictions on system resources. Rollback: no rollback mechanism is mentioned. Source attribution: README references sister projects and Hyperframes, and provides license provenance for templates. Deductions: lack of specific evidence for least privilege, user confirmation, sensitive data protection, dependency security, external effects, and rollback.
Evidence shows: Consistency between README and test files is good, tests cover specific issues like filename decoding and format parsing. Dependency availability: lists Node.js, pnpm, ffmpeg, and Chromium as prerequisites with installation instructions. Failure messages: test files imply error handling, but no detailed failure message examples are provided. Deductions: insufficient evidence for failure messages, and no specific documentation on error handling.
Evidence shows: README clearly identifies target audience (coding agent users) and multiple use cases (generating videos from prompts, articles, or repos). Capability boundaries: clearly states currently supported engine (Hyperframes) and planned engines (Remotion etc.), and indicates which features are implemented. Trigger precision: provides CLI commands and template search examples, but does not detail how agents trigger precisely. Environment fit: provides cross-platform installation instructions and dependency checks. Deductions: insufficient evidence for trigger precision, and no detailed agent interaction protocol.
Evidence shows: Information architecture is clear, README provides table of contents, architecture diagram, and quick start. Install notes are detailed, including prerequisites and commands. Naming stability: package names and command names are consistent in documentation, but no version history is provided. Examples and FAQ: provides multiple examples and template showcases, but no FAQ. Known limitations: explicitly states unimplemented engines and features. License: provides full Apache-2.0 license text. Versioning and changelog: no CHANGELOG or version history is provided. Maintenance responsibility: README mentions team and community links, but does not explicitly state maintenance policy. Deductions: missing version history and changelog, and no FAQ.
Evidence shows: Output usability: README claims to generate real MP4 files and provides template previews. Marginal value: emphasizes multi-engine adaptation and template library, but does not provide detailed comparison with other tools. Cost-benefit: states no per-render fees, but no performance benchmarks are provided. Deductions: lack of performance data and detailed comparison with other tools.
Evidence shows: Claim traceability: README provides architecture diagram and implementation details, but no specific code references. Cross-source corroboration: references sister projects and Hyperframes, but no external verification. Fact-inference separation: README clearly distinguishes implemented features from planned ones. Deductions: lack of external verification and specific code references.
- No specific implementation details for least privilege, user confirmation, sensitive data protection, dependency security, external effects, and rollback are provided.
- No version history or changelog is provided, and no FAQ is available.
- No performance benchmarks or detailed comparison with other tools are provided.
- No external verification or specific code references are provided.
What does this agent do, and when should you use it?
html-video is a local HTML-to-video workflow with a browser Studio and an html-video CLI. It sends a prompt, web article, or GitHub repository material to a selected coding agent, which produces a content-graph storyboard and animated HTML for each frame. Its default adapter-hyperframes backend records those animations in headless Chromium and uses ffmpeg with libx264 to create and concatenate MP4 files. The project includes 21 metadata-backed templates and can optionally add MiniMax-generated background music and narration during export. It fits teams that want HTML/CSS-based video production and local rendering; Hyperframes is the only documented runnable renderer today, while other engines remain planned.
The Studio can fetch a web article server-side and flatten it to Markdown, retrieve a GitHub repository's description, top-level structure, and README through the public API, or accept a direct prompt. It invokes a detected local agent on PATH or the Anthropic Messages API to emit a content-graph with nodes and sequence, dependency, or contrast edges; that graph is topologically ordered into frames and timing, while single-frame videos bypass it. Each node becomes a self-contained animated HTML frame on disk. adapter-hyperframes records frames in Chromium to WebM, then ffmpeg converts them to libx264 MP4 and concatenates them. The Soundtrack panel can call MiniMax for music or TTS narration, then ffmpeg mixes the audio with ducking and optional fades; the CLI also exposes doctor and search-templates.
- A content team wants to turn a publicly accessible article into a paced explainer video, with the local Studio fetching the source and an agent structuring its points.
- An open-source maintainer wants to paste a GitHub repository URL and produce a project walkthrough based on its description, top-level structure, and README.
- A frontend designer already working in HTML, CSS, and animation needs local Chromium-and-ffmpeg output for an MP4 deliverable.
- A developer needs to search video templates from a scriptable workflow, for example finding templates for a “github stars race” intent.
- A product or brand team wants to add MiniMax background music and narrated copy to a template-based video at export time.
What are this agent's strengths and limitations?
- The shipped Hyperframes backend performs real rendering: headless Chromium records animated HTML and ffmpeg produces libx264 MP4.
- A single
render(input, ctx)adapter contract separates rendering engines from the storyboard and agent workflow. - All 21 templates have
template.html-video.yamlmetadata covering input schemas, output characteristics, and license provenance, which gives agents a defined way to select and fill them. - It accepts prompts, web articles, and GitHub repositories as source material and can create multi-frame content-graph storyboards.
- Rendering is local with no per-render fee, while MiniMax music and narration are optional additions.
- Hyperframes is the only implemented, runnable engine; Remotion, Motion Canvas, Revideo, and Manim adapters are not yet built.
- The runtime requires Node.js, pnpm, ffmpeg, and Chromium or Playwright, so it is not a single-binary deployment.
- Generation depends on a supported local CLI being available on PATH, or on BYOK access to the Anthropic Messages API.
- Article/repository fetching needs network access, and soundtrack generation separately requires a MiniMax API key.
- No working template marketplace, third-party engine adapter, or non-Hyperframes renderer is documented.
How do you install or deploy this agent?
Install Node.js 20+, pnpm 9+, a recent ffmpeg, and Chromium or Playwright Chromium. Then run:
npx playwright install chromium
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studioThe Studio opens at http://127.0.0.1:3071. For generation, install a supported local agent CLI and expose it on PATH; if none is installed, configure an Anthropic API key. For soundtrack generation, add a MiniMax API key in Settings → Audio.
How do you use this agent?
Start the Studio, choose a template or enter a prompt, article URL, or GitHub repository URL, then select an available agent to generate the storyboard and per-frame HTML. Edit frame text as needed and export the MP4. Run node packages/cli/dist/bin.js doctor to detect agents and engines, or node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3 to return three matching templates. Single-frame projects render directly; multi-frame projects are ordered through the content-graph and rendered frame by frame before concatenation.
How does this agent compare with similar options?
Compared with Hyperframes, html-video uses it as the shipped HTML+CSS+GSAP renderer while adding an agent loop, templates, a content graph, and Studio workflow above it. Relative to Remotion's React component model, Motion Canvas/Revideo's TypeScript canvas generators, and Manim's math/3D-first approach, html-video aims to accommodate them behind the same render(input, ctx) interface; those adapters are only planned or under research today.