Show HN: Popkorn – A CSS based alternative for Lottie animations
github.com
I’ve been working on this project for a while now and wanted to share it here for feedback and contributions. You can test drive it in the playground at:
I’ve been calling it Popkorn. The idea is to author vector animations, similar to Rive and Lottie, but in a CSS-like language, with interactivity and other modern necessities baked into the format. I’ve stayed true to CSS for the most part, sprinkling on a little custom syntax for things like interactivity.
Staying close to CSS gives it good DX, and it turns out to make it very LLM-friendly too. Nearly my entire examples gallery is AI generated. Even cheap models like GLM or DSv4 Flash can one shot whole animations from scratch, no fine-tuning required. There’s a Copilot feature the Playground that will let you bring your own key, or use the MCP to test drive AI features. Do share what you make please!
There’s a web player that renders on Canvas or SVG, and a React Native player using Skia. It supports nested transforms and parenting, reusable symbols, masks and track mattes, gradients, trim paths, path morphing, motion paths, and per-subtree time scaling, enough for proper production-grade animation. Converters for Lottie and SVG let you import your existing assets and then prompt changes to it through the built-in Copilot. Something I did not expect was that converted Lottie scenes usually come out smaller than the JSON they came from, despite CSS being the more verbose syntax.
My vision is an editable, accessible format for both humans and LLMs that integrates well with version control, truly open source and free in every sense, as opposed to opaque binary or JSON blobs that are difficult to diff, edit and prompt changes to. The existing formats are backed by companies, which is fine and they’ve done great work, but a company’s roadmap follows what makes commercial sense for it. I’d rather the future of motion design be community-driven and aligned with standards that already exist.