HTML animation to transparent video

A web page is a great place to design an animation: CSS keyframes, canvas, SVG and JavaScript are fast to write and easy to tweak. Getting it out as a clean video with a transparent background is the hard part. web2vid does exactly that, on your own computer.

1. Make the page transparent

Whatever has no background in the page becomes transparent in the video. Add this to your CSS:

html, body {
  margin: 0;
  background: transparent;
}

Size your animation to the viewport (for example with vw, vh or 100%), because the page is captured at exactly the width and height you choose.

2. Render it with the desktop app

1. Install web2vid and FFmpeg (macOS: brew install ffmpeg).
2. For HTML you also need chrome-headless-shell, a small headless Chrome. Install it once:

   npx @puppeteer/browsers install chrome-headless-shell@stable --path ~/.cache/puppeteer

   The app finds it there by itself.
3. Click HTML and pick your file, or drag it onto the window. You’ll see a live preview.
4. Pick a Preset (Full HD, 4K, 9:16 for Reels/TikTok/Shorts, square…) or type a size, and set the Duration.
5. Pick a Format: WebM for websites, MOV for video editors, GIF for chats and docs.
6. Keep Transparent ticked and click Render. The video is saved next to your HTML file.

3. Or from the command line

The same engine is two Rust command-line tools:

aether-renderer-capture -i anim.html --stdout --fps 30 -d 4 -s 1920x1080 \
  | aether-renderer-core -i - -o anim.webm --fps 30 --frames 120

More in the CLI docs.

Why the result is exact

web2vid doesn’t record your screen. It freezes the page’s clock and steps it forward exactly one frame at a time: performance.now(), requestAnimationFrame, Date, CSS animations and the Web Animations API all see the exact frame time. No dropped frames, no stutter, and the same page gives the same video every time, on a slow laptop or a fast workstation.

Good to know

• <video> and <audio> elements, and WebGL or canvas code that runs on its own clock, are not frozen and may not line up.
• MP4 can’t be transparent. Use WebM, MOV or GIF, or untick Transparent and pick the background colour the video will sit on.