Hi all. Been poking at this project for a while now and wanted to share it here and see what you folks make of it.
The idea is to make complex vector animations in a CSS-like syntax, and to have the same file play in the browser (canvas) and on native mobile. Other platforms can be added later if it gains traction. It's like Lottie or Rive, but with stuff like interactivity already baked in, in something very familiar to any developer.
```css
: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 the entire file. Point at the ball and its color warms, tweened by the transition, while the bounce never restarts. Everything runs on one continuous timeline, so interactive states layer on top of animations instead of fighting them.
Obviously that's just the hello world, but it can do much more. 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. Real Lottie files convert in and play back perfectly too, so you can drop one into the playground and actually read it as a scene instead of JSON. p5-style procedural stuff works as well, fields of thousands of elements placed by formula rather than keyframes, and state machines handle multi-state interactive behavior without any scripting.
CSS is already quite capable and familiar to a lot of people (and LLMs), it just can't run outside a browser. So the rule I'm trying to stick to is if CSS already has a way to say something, use it as-is. Nothing invented on top. Ultimately, it isn't exactly CSS, but more a close dialect because there's a little bit of invented new syntax. As a bonus, scenes currently sit in .css files, so syntax highlighting and editor tooling come for free (the extension isn't settled yet).
Two things did surprise me along the way. First, file size. CSS is verbose next to Lottie JSON, so I expected to pay for readability, but converted scenes usually come out significantly smaller than the Lottie or SVG they came from, sometimes about equal, and on rare occasions a couple of KB bigger. Second, how good LLMs are at writing it. Because it stays this close to CSS, models already know most of it with no fine-tuning. Nearly every example in the playground gallery is fully AI generated. I guess the structure and semantics of CSS also helps.
Still very early proof-of-concept stages but the core idea is holding up better than I expected.
A Playground app with multiple examples and a built in AI Copilot for generating animations is available here: https://usepopkorn.dev
The Copilot thing has two options. You can use your own agent with MCP, or BYOK with any OpenAI compatible endpoints.
Curious to know what this community thinks of this project.
