WebM to Lottie: from browser recordings to app-ready animations
Where WebM files come from — and why they need converting
WebM is the format the web itself produces: the MediaRecorder API behind browser screen recorders, Chrome extensions, OBS's web-friendly export, and most in-browser video tools all emit WebM with VP8 or VP9 video. That makes it the natural capture format for product demos and bug reports — but not a format you can drop into a mobile app or embed as a lightweight animation. Converting to Lottie JSON turns the recording into a single self-contained file that plays in lottie-web, lottie-react, iOS, and Android with full playback control. If your recording is an MP4 or a QuickTime file instead, use MP4 to Lottie or MOV to Lottie — same pipeline, tuned pages.
The duration quirk in MediaRecorder WebM files
Files produced by browser recorders often lack a duration header — the recorder streams bytes without knowing when it will stop. Browsers usually recover the duration after a full playthrough. If the clip range shows 0:00 or behaves oddly, press play in the preview panel once, let it reach the end, and then set your start and end times. The frame capture itself is unaffected; it seeks by timestamp directly.
Transparent WebM: the hidden superpower
VP9 WebM supports an alpha channel, and motion designers use it to export transparent renders from After Effects (via plugins) or Rive. This converter preserves that transparency when you pick WebP output — each captured frame keeps its alpha, and the resulting Lottie composites cleanly over any app background. That workflow — transparent WebM → Lottie — is one of the few free paths to get transparent video-sourced animations into a mobile app without After Effects scripting.
Round-tripping and sharing your result
Once you have the Lottie JSON, the rest of the HuPNG cluster covers every direction: preview-friendly GIFs for Slack and docs via Lottie to GIF, GIF sources into Lottie via GIF to Lottie, and quick shareable GIFs straight from video with Video to GIF. Everything runs client-side — no uploads, no accounts, no watermarks.