Launching today
Popkorn
A Portable CSS-like format for interactive motion graphics
18 followers
A Portable CSS-like format for interactive motion graphics
18 followers
A portable format for motion graphics — write scenes in familiar CSS, run the same file on web and native mobile. The AI-Friendly syntax of CSS makes it easy to generate entire scenes or edit animations using natural language. You can convert your existing Lottie or SVG animations easily with the built-in converter.
Since the days we wrote CSS animations by hand, I've always thought of CSS as capable of expressing a lot when it comes to graphics, especially animation, but it was always limited to the browser. Popkorn takes that idea and runs with it: a portable **format + runtime** for motion graphics, where you write a scene in syntax you already know and run the same file on the web and on native mobile.
I came across a couple of happy surprises while making Popkorn. First, I had no animations to test with because Popkorn was new so I made a converter for Lottie animations. The resulting Popkorn files were almost always smaller than their source Lotties, and it was unexpected because Lottie is minified JSON and Popkorn is full CSS syntax. The second thing was that I could generate whole scenes or make surgical changes to the imported animations because LLMs were already very good at CSS.
I had to introduce a little custom syntax to support some essential features such as state machines, but I've tried to stay as true to CSS as much as possible. This began as a personal what-if but has evolved into a very capable format and runtime, so I wanted to share Popkorn with the community as an open-source project.
Converting an old Lottie file took about 30 seconds, and the CSS syntax made it surprisingly easy to tweak the timing on a bounce animation.
@salihawkmf That's great to hear. It's even easier with the Copilot. You can prompt your edits and watch the AI work in real time.
the css-as-scene-description approach is honestly so clever, especially the built-in lottie converter saving people from rewriting animations from scratch
@gizempmx2 Thank you Gizem
The CSS approach feels surprisingly natural for motion work and I love that I can run the same file in the browser and on my phone.
@narinkonukuank Thank you Narin. CSS animations are definitely underrated and can do much more with the right tooling.