Aether Renderer 0.3 🪼

Turn web animations into transparent video

HTML, CSS and JS in. WebM, MOV, GIF or MP4 out, with real alpha. Local, free and frame-perfect.

Download free View on GitHub

Made with web2vid itself: this canvas animation (open it, it runs live), rendered frame by frame.

How it works

1
Open your animation
An HTML file, a web address, a folder or ZIP of PNG frames. Or just drag it onto the window.
2
Pick size and format
WebM, MOV, GIF or MP4. Presets for Full HD, 4K, Reels/TikTok/Shorts, square and stickers.
3
Render
Every frame is stepped and captured in headless Chrome, then encoded. The same page gives the same video, every time.

The Aether Renderer desktop app, in light and dark mode

Everything you need, nothing you don't

HTML to video

CSS animations, canvas, requestAnimationFrame, timers and the Web Animations API, all frozen to an exact clock per frame.

Frames to video

Exported a PNG sequence from Blender, After Effects or an AI tool? Drop the folder or ZIP in.

Real transparency

WebM (VP9 alpha) for the web, ProRes 4444 MOV for video editors, transparent GIF. Or fill the background with a color.

Frame-perfect

No screen recording, no dropped frames, no timing jitter. A slow machine makes the same video as a fast one.

Live preview and editor

See the page at the exact output size, edit the HTML in the Code tab, or start from a template.

Local and free

Runs on your computer. Nothing is uploaded, no account, no watermark. Open source, MIT licensed.

Made for

Titles and lower thirds. Design them in HTML, drop the transparent MOV on your timeline.
Stickers and emoji. Small transparent GIFs and WebMs for chats and sites.
Website loops. A hero animation as a light WebM instead of heavy JavaScript.
Social posts. Vertical 9:16 videos from a web page, frame by frame.

Guides

HTML animation to transparent video

Turn any HTML, CSS or JavaScript animation into a WebM, MOV or GIF with a transparent background, frame by frame, with the free web2vid desktop app or the command line.

Lower thirds with alpha for your video editor

Design animated titles and lower thirds in HTML and CSS, render them as transparent ProRes 4444 MOV files, and drop them on your timeline in DaVinci Resolve, Premiere Pro or Final Cut Pro.

Transparent video on your website

Use a transparent WebM (VP9 with alpha) as an autoplaying, looping video on your site, with a fallback for Safari. Lighter than a GIF and sharper than a PNG sequence.

Make a perfect, seamless loop

Build an HTML or canvas animation that loops without a visible seam, by making everything a function of time modulo the loop length, and render it frame-perfectly.

Transparent GIF from a CSS animation

Turn a CSS or HTML animation into a transparent animated GIF for chats, emails, docs and README files, and avoid jagged edges.

PNG sequence to transparent video

Turn a folder or ZIP of PNG frames from Blender, After Effects, a canvas or an AI tool into a transparent WebM, ProRes MOV, GIF or MP4, with fades and the right frame order.

All guides →

Questions

Is web2vid free?

Yes. The desktop app is free and open source (MIT): no account, no watermark, no upload. A paid cloud service may come later; the desktop app stays free.

Which formats keep transparency?

WebM (VP9 with alpha) for websites, MOV (ProRes 4444) for video editors, and GIF (on/off per pixel). MP4 has no transparency; web2vid can fill the background with a colour instead.

What can I turn into a video?

Any HTML page with CSS animations, canvas, requestAnimationFrame, timers or the Web Animations API, a web address, or a folder or ZIP of PNG frames.

Why not just screen-record it?

Screen recordings drop frames, depend on how busy your computer is, and lose transparency. web2vid freezes the page clock and captures every frame exactly, so the same page always gives the same video.

What do I need to install?

The web2vid desktop app (macOS, Windows, Linux) and FFmpeg. For HTML input also chrome-headless-shell, which the app finds automatically once installed.

Coming soon: Cloud and API ☁️

Render in the cloud

Upload your HTML, get a transparent video back. No install, no Chrome or FFmpeg needed.

AI animation generator

Describe the animation in words, AI writes the HTML, you preview and render it.

API for developers

Send HTML from your own app or pipeline, get a video URL back.

Would you use it? Tell us in 30 seconds →

Need a dedicated cloud instance, a high-volume API or a custom setup for your company?Get in touch, and I'll get back to you within 24 hours.

Download

Free and open source. Pick your system on the latest release:

macOS (.dmg)Windows (.msi)Linux (.AppImage)

Signed on macOS (notarized by Apple, Apple Silicon and Intel) and Windows. Linux: make the AppImage executable (chmod +x) and run it.

You'll also need

FFmpeg on your PATH. On macOS: brew install ffmpeg

For HTML input, chrome-headless-shell (the app finds it automatically):

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

Prefer the command line?

The engine is two Rust crates you can use on their own:

cargo install aether-renderer-capture aether-renderer-core
aether-renderer-capture -i anim.html -o frames --fps 30 -d 4
aether-renderer-core -i frames -o anim.webm

aether-renderer-core · aether-renderer-capture

Docs for the CLIs and crates: aetherrenderer.com