#HTML Video: Give a link to AI, get an MP4 back

Hand a coding agent a link to an article or a GitHub repository, and it returns a multi-scene MP4 rendered on your laptop. That is the ambitious pitch of HTML Video, an open source project that turns web technology into a video pipeline.

#What it is

HTML Video is an open source project that uses HTML and CSS to build animated scenes — essentially web pages that move — and then records those scenes into a real video. A coding agent acts as the draft builder: Codex, Claude Code, Cursor, Gemini, Windsurf, or other agents read the source content, pick the important points, divide them into scenes, and fill in templates.

The repository ships with 21 curated templates for data charts, glitch titles, liquid heroes, cinematic light leaks, typewriter effects, and logo outros. A browser-based Studio lets you pick a style, chat with the agent, review the scene list, edit text per scene, reorder, and export. It is not a mysterious single command — there is a real editing surface.

#Why it matters

• It turns an article, dataset, or repository into a structured explainer video, which is useful for content repurposing.
• It leverages familiar HTML and CSS skills for motion graphics, so developers do not need to learn a dedicated video editor.
• Rendering happens locally under an Apache-2.0 license with no per-render fee, which means you keep control of your data and do not pay per export.
• It works with coding agents you may already have, like Codex or Claude Code, rather than locking you into a proprietary model.

#How it works

The pipeline runs in six steps. You provide a link or a prompt. The AI agent writes a storyboard, generates each scene as HTML, and a headless Chromium records the animations. FFmpeg then encodes and stitches everything into a single MP4 file. The Hyperframes engine is the currently working renderer that connects headless Chromium recording with FFmpeg encoding.

The Studio interface runs in your browser, giving you a template gallery, an agent chat panel, a storyboard frame list, inline text editing, and an export button. The architecture is designed to be engine-agnostic, so other renderers could plug in over time.

#Caveats

The biggest caveat is that only Hyperframes is fully connected and working today. Remotion, Motion Canvas, Revideo, and Manim are listed on the roadmap but are not yet functional. This is not a one-button app: you still need Node.js, pnpm, FFmpeg, Chromium, and a coding agent, so the setup step will trip up newcomers. And while rendering itself has no per-video fee, the coding agent and optional audio or voice services can still cost money. AI produces a fast draft, but you should still review content and layout before shipping.

#Who it's for

HTML Video is for developers and technical content creators who want to turn written material into structured explainer videos and are comfortable with a Node-based toolchain. If you want cinematic AI-generated video from a text prompt, this is not that.

The idea is strong and the workflow is clear, but the project is still early — worth trying, with the understanding that you will be checking the build.

Source: https://github.com/nexu-io/html-video