vawe · HTML to video for developers and AI agentsOne page in.
One film out.
Write one HTML page. vawe renders it to an mp4. You write the page, or an agent does.
01 / The problem
A motion video takes an editor and a week.
Timelines, keyframes, private project files. Nothing an agent can read, and nothing you can diff.
02 / The page · CINDRE, one page.html
So write a page.
HTML, CSS, Web Animations, SVG, canvas or three.js. Nothing private to learn.
03 / The result · showcase, 14 s
One mp4. Every canvas.
16:9, 9:16, 1:1, 4:5 and 4:3 from the same page. Audio mixed offline.
A film is one page.
<!doctype html>
<html data-aspect="16:9">
<meta name="duration" content="3">
<meta name="message" content="One page. One film.">
<style>
body { margin: 0; display: grid; place-items: center start;
height: 100vh; padding-left: 8vw; background: #000; }
h1 { font: 800 9vh/1 system-ui; color: #fff;
animation: rise 0.7s var(--ease-land) 0.3s both; }
@keyframes rise {
from { translate: 0 6vh; clip-path: inset(0 0 100% 0); }
to { translate: 0 0; clip-path: inset(0 0 0 0); }
}
</style>
<h1>One page. One film.</h1>films/hello/page.html
Open it in a browser and it plays. Hand it to vawe and it seeks the page to each frame, so frame 412 is the same on every run. A change to the motion is a diff you can read before it ships.
130 video components to copy.
See every video componentQuestions.
What is vawe?
vawe is an open source framework that turns one HTML page into a video file. You, or a coding agent, write the film in HTML, CSS, Web Animations, SVG, canvas or three.js; the renderer seeks the page frame by frame in headless Chrome and encodes it with ffmpeg. The blog covers how it is built and measured.
Is it open source?
Yes, under Apache 2.0. The engine, the studio and this site are on GitHub.
Where does it run?
On your machine. The renderer drives Chrome and encodes with ffmpeg, and the studio previews a page live.
Does it work with my agent?
Yes. A film is plain HTML, so any coding agent can write one, and vawe ships skills that teach it the loop: write, draft, critique, ship. See vawe for AI agents.
Can it match my brand?
Yes. A page uses your fonts and colours as CSS, the same way your site does.
How is it different from Remotion?
Remotion builds video from React components under a source-available licence. vawe renders one HTML page under Apache 2.0, with no React and no build step. Both render in headless Chrome. Read vawe vs Remotion or the wider list of Remotion alternatives.