Aura is my hackathon entry: a small browser tool built with Framer 3.0 agents. It generates living, animated mesh gradients. You pick the colors, tweak the motion, randomize a fresh look, and copy the result straight into your own project as code, CSS, or an image.
Why I built it
I wanted to make something interactive that designers would actually use, not just another page to scroll past. A gradient generator felt like the right test: it has to look good the second it loads, feel good to play with, and stay useful when you walk away with the export.
What's inside
A live animated mesh gradient running on a canvas
Color stops you can recolor, add, and remove
Curated presets like Iris, Aurora, and Sunset Haze
Speed and scale controls that shape the motion in real time
A grain toggle for a softer, more premium finish
Randomize for an instant new palette
Export: copy as a Framer component, copy CSS, or download a PNG
It is one focused Framer code component. The canvas render loop, the control panel, and the export all share state, so the gradient reacts the instant you touch anything.
What agents helped with
Agents helped me build and refine each part on its own: the animation loop, the frosted glass panel, the mobile layout, and the export options. The trickiest part was keeping the render reliable across the editor, preview, and the published site, and working in small steps made that far easier to debug.
What surprised me most is how well agents handled the live, interactive side of Framer, not just layout and content. With a clear structure and small steps, you can actually ship something people want to touch and take with them.
Try it: pick a preset, drag the speed slider, hit randomize, then export your favorite.
Built with Framer 3.0 AI agents
Aura is my hackathon entry: a small browser tool built with Framer 3.0 agents. It generates living, animated mesh gradients. You pick the colors, tweak the motion, randomize a fresh look, and copy the result straight into your own project as code, CSS, or an image.
Why I built it
I wanted to make something interactive that designers would actually use, not just another page to scroll past. A gradient generator felt like the right test: it has to look good the second it loads, feel good to play with, and stay useful when you walk away with the export.
What's inside
A live animated mesh gradient running on a canvas
Color stops you can recolor, add, and remove
Curated presets like Iris, Aurora, and Sunset Haze
Speed and scale controls that shape the motion in real time
A grain toggle for a softer, more premium finish
Randomize for an instant new palette
Export: copy as a Framer component, copy CSS, or download a PNG
It is one focused Framer code component. The canvas render loop, the control panel, and the export all share state, so the gradient reacts the instant you touch anything.
What agents helped with
Agents helped me build and refine each part on its own: the animation loop, the frosted glass panel, the mobile layout, and the export options. The trickiest part was keeping the render reliable across the editor, preview, and the published site, and working in small steps made that far easier to debug.
What surprised me most is how well agents handled the live, interactive side of Framer, not just layout and content. With a clear structure and small steps, you can actually ship something people want to touch and take with them.
Try it: pick a preset, drag the speed slider, hit randomize, then export your favorite.
Built with Framer 3.0 AI agents
Tom Martinec