Hi all,
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 https://usepopkorn.dev/
I'm 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.
:root { width: 400px; height: 400px; background: #1a1a2e; }
@keyframes bounce {
0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 1, 1); }
50% { transform: translateY(180px); animation-timing-function: cubic-bezier(0, 0, 0.67, 1); }
100% { transform: translateY(0); }
}
#ball {
type: circle;
cx: 200px; cy: 80px; r: 36px;
fill: #ff6b6b;
animation: bounce 1.2s linear infinite;
transition: fill 250ms ease;
&:hover { fill: #ffd166; }
}
That's an entire scene. Very familiar to anyone who's worked with CSS before.
Staying this 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 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, integrates will twith 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 stick to standards that already exist.
Really curious what the community makes of the concept.
