This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Popkorn
A Portable CSS-like format for interactive motion graphics
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.
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.
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.
the css-as-scene-description approach is honestly so clever, especially the built-in lottie converter saving people from rewriting animations from scratch
About Popkorn on Product Hunt
“A Portable CSS-like format for interactive motion graphics”
Popkorn was submitted on Product Hunt and earned 14 upvotes and 7 comments, placing #75 on the daily leaderboard. 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.
Popkorn was featured in Design Tools (261.3k followers), Developer Tools (515.9k followers), GitHub (41.3k followers) and Animation (2.4k followers) on Product Hunt. Together, these topics include over 141.7k products, making this a competitive space to launch in.
Who hunted Popkorn?
Popkorn was hunted by Ayas Nasih. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Popkorn stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Ayas Nasih
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.