Write a web page. Get a film.
A vawe film is one HTML page: CSS, Web Animations, SVG, canvas or three.js. The renderer seeks it frame by frame and encodes the video.
A lens-filmed tracking HUD: every label is a real pixel coordinate. Style after Michael Nowak (@mnowakdesign).
Write a page. Get a film.
Write
HTML, CSS, Web Animations, SVG, canvas or three.js, in one page. You write it, or an agent does.
Render
The renderer seeks the page to each frame's time, so frame 412 comes out the same in any order.
Ship
One page lays out for every canvas: 16:9, 9:16, 1:1, 4:5 and 4:3.
The film is the page.
This is a whole film. Open it in a browser and it plays; hand it to vawe and it renders.
Read it
Nothing here is a private format. It is the HTML and CSS you already write.
Review it
A change to the motion is a diff you can read before it ships.
<!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: #16151a; }
h1 { font: 800 9vh/1 system-ui; color: #f4f2ee;
animation: rise 0.7s cubic-bezier(.2,.8,.2,1) 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>What you get.
Review like code
Motion changes arrive as a readable diff, not a binary project file.
Hand it to an agent
An agent writes the page, checks read the draft, and a fresh session judges the frames.
Every canvas, one file
16:9 through 9:16 from the same page, laid out with CSS.
Same frames, every run
The clock and the randomness are virtual. Frame 412 is always frame 412.
Questions.
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.
Can it match my brand?
Yes. A page uses your fonts and colours as CSS, the same way your site does.