I recreated Notion’s website hero animation as LottieFiles dotLottie to compare it against the original webm version. Results: Original webm: 942 KB dotLottie version: 368 KB 60.93% smaller file size This can contribute to better web performance and reduced bandwidth usage. Beyond the size reduction, the dotLottie version is: Resolution-independent: scales infinitely across devices without losing quality. Interactive: can be controlled with code or user input. Dynamically customizable: properties of animated elements can be edited on the fly with motion tokens. Easier to treat like a real UI component instead of a video: supports things like light and dark modes, and can be easily implemented across different platforms. I built the animation with LottieFiles, and the results were impressive. It’s interesting to see how far motion formats for the web are evolving. The case study is below.

Check it out