Guides
Web animations to video, step by step
Short, practical guides for designers, video editors and developers.
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.
Screen recording vs frame-by-frame capture
Screen recordings drop frames, stutter and lose transparency. Frame-by-frame capture with a frozen clock gives a perfect, repeatable video of any web animation.