Playground is my entry for the Framer Agents Hackathon: a new page on my studio's site that turns our work into an infinite, draggable canvas you can explore freely.
Why I built it
I've wanted something like this for a long time. As an agency, we produce a lot more than what ends up as a polished case study. Work that's great but never had a story built around it. A standard portfolio grid forces everything into the same structure, so most of it just never gets shown. Playground is my answer to that. One open space where I can put everything, case study or not, and let people wander through it at their own pace.
What's inside
An infinite canvas you can drag, scroll, and pan in any direction
Work pulled from the CMS, so it stays in sync as new projects are added
Case studies get a badge and link through to the full write-up. Everything else is just there to explore
A reset button that snaps you back to the center when you've wandered too far
What agents helped with
I started with the agent inside Framer, then moved to Claude Code through the Framer MCP. The infinite canvas needed a custom code component: free panning, pulling work from the CMS, lazy-loading images in and out as you move. The agent handled all of it, iterating with me piece by piece.
What surprised me most was how well it actually communicated with Framer. Not just generating code, but reading the project, understanding the CMS structure, recognising the components I already had, and wiring everything together correctly. I expected a free-form infinite canvas to be something I'd have to fight the tools on. Instead it was genuinely smooth, and I came away more impressed with the whole setup than I anticipated.
Built with Framer 3.0 agents.
Playground is my entry for the Framer Agents Hackathon: a new page on my studio's site that turns our work into an infinite, draggable canvas you can explore freely.
Why I built it
I've wanted something like this for a long time. As an agency, we produce a lot more than what ends up as a polished case study. Work that's great but never had a story built around it. A standard portfolio grid forces everything into the same structure, so most of it just never gets shown. Playground is my answer to that. One open space where I can put everything, case study or not, and let people wander through it at their own pace.
What's inside
An infinite canvas you can drag, scroll, and pan in any direction
Work pulled from the CMS, so it stays in sync as new projects are added
Case studies get a badge and link through to the full write-up. Everything else is just there to explore
A reset button that snaps you back to the center when you've wandered too far
What agents helped with
I started with the agent inside Framer, then moved to Claude Code through the Framer MCP. The infinite canvas needed a custom code component: free panning, pulling work from the CMS, lazy-loading images in and out as you move. The agent handled all of it, iterating with me piece by piece.
What surprised me most was how well it actually communicated with Framer. Not just generating code, but reading the project, understanding the CMS structure, recognising the components I already had, and wiring everything together correctly. I expected a free-form infinite canvas to be something I'd have to fight the tools on. Instead it was genuinely smooth, and I came away more impressed with the whole setup than I anticipated.
Built with Framer 3.0 agents.
Artone Studio