VIDEO

html-video — HTML to video,
on your laptop.

The HTML to video meta-layer from the OneHub family. Describe a video — or paste an article link or a repo — and your local agent writes a multi-frame storyboard, fills each frame with animated HTML, and renders a real MP4 with the Hyperframes engine.

6
Coding agents
6
Coding agents
21
Video templates
Hyperframes
Render engine
1

HTML to video is a real category — but every engine is opinionated. html-video is the meta-layer above all of them.

2

You talk to your agent; it picks the engine.

3

A link goes in, an MP4 comes out — locally.

1

Source fetch

Paste a URL or repo — the studio fetches and flattens it to clean Markdown.

2

Agent loop

Your local agent reads the material and emits a content-graph storyboard.

3

Content-graph

A multi-frame IR with nodes and edges describing every scene.

4

Per-frame HTML

Each node becomes an animated HTML frame with full motion design.

5

Hyperframes render

Headless Chromium records each frame at the target resolution and framerate.

6

ffmpeg → your.mp4

All frames are encoded, concatenated, and optionally mixed with a soundtrack.

21 templates, one command away

From cinematic title cards to kinetic typography, data-viz explainers to product promos — every template is a ready-to-render Hyperframes composition you can remix in seconds.

Cinematic intro Data viz Product promo Social short Explainer Title card Outro Kinetic type Countdown Logo sting Comparison Stack visual Timeline Map route Quote card Code walkthrough Changelog Side-by-side Call to action Lower third Slideshow

Pluggable, extensible, local

html-video ships with Hyperframes. Add more rendering engines as your pipeline grows.

Hyperframes

Shipped render engine — headless Chromium, animated HTML, deterministic MP4 output.

Shipped

Remotion

React-based video rendering. Planned integration as an optional engine.

Planned

Motion Canvas / Revideo

Canvas-driven declarative video. Under evaluation for the engine pipeline.

Planned

Manim

Mathematical animation engine. Researching for data-viz and scientific content.

Researching

From data viz to repo walkthroughs

One approach, infinite formats.

📊

Data-viz video

Animated charts, graphs, and metrics from real data.

🚀

Product promo

Launch videos and feature reveals with brand motion.

📱

Social short

Vertical or square clips for any platform.

🧠

Explainer

Break down complex ideas with clear visuals.

🎬

Title & outro

Cinematic opens and closers for your content.

🖼️

Cinematic frame

Designed full-screen frames with motion depth.

✍️

Kinetic type

Animated text that lands every word on the beat.

💻

Repo walkthrough

Code-change explainers from any repo or project.

Auto-detected, zero config

html-video works with the agent already on your machine.

OneHub Vela native
Claude Code Anthropic
Cursor Agent composer mode
Codex CLI OpenAI
Hermes agentic mode
Anthropic API any client

Every video deserves a score

html-video generates background music and sound effects from a mood prompt — or uses your own audio tracks. No third-party dependency, no license fee.

TTS voiceovers

Multi-provider text-to-speech with expressive voices, synced to the timeline.

Background music

Generate original BGM from a mood or style prompt — cinematic, lo-fi, ambient, and more.

Sound effects

Auto-place SFX on transitions, beats, and callouts. Built-in library or your own samples.

Ship a video in 3 commands

No cloud, no queue, no upload.

$ npx hyperframes init # scaffold a new video project
$ npx hyperframes preview # live-preview in the browser
$ npx hyperframes render # export final.mp4

Shipped

  • Hyperframes engine — production-ready render pipeline
  • 21 video templates — title cards, explainers, promos, kinetic type
  • AI soundtrack — TTS, BGM, SFX generation
  • 6 agent auto-detect — works with your coding agent
  • Source fetch — URL or repo to Markdown
  • Content-graph storyboard — multi-frame IR

In progress

  • Remotion engine — React-based rendering integration
  • Motion Canvas support — declarative canvas-driven output
  • Multi-language TTS — voiceover in 20+ languages
  • Template marketplace — community template sharing
  • Subtitle & caption export — SRT, VTT, embedded

Researching

  • Manim engine — mathematical animation for data-viz
  • Real-time collaboration — multi-agent video editing
  • Cloud rendering — offload to AWS Lambda
  • Interactive video overlays — clickable hotspots and branching
  • 3D scene support — Three.js and WebGL frame rendering

One platform, every output

html-video is one product in the OneHub Design ecosystem — the all-in-one AI design studio for your coding agent.

Start making video from HTML

No cloud. No queue. Just your laptop, your agent, and an MP4.

Get Started