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).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
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.
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.
On the analytics side, Popkorn competes within Design Tools, Developer Tools, GitHub and Animation — topics that collectively have 820.9k followers on Product Hunt. The dashboard above tracks how Popkorn performed against the three products that launched closest to it on the same day.
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.
For a complete overview of Popkorn including community comment highlights and product details, visit the product overview.
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.