PUZZLE GAME - THREE DIFFICULTY LEVELS. ONE PERFECT IMAGE.
Business Context
I built Puzzle Game just for fun during a Framer hackathon — with no big product brief, no client, and no serious business problem to solve. I simply wanted to see how far I could push Framer and turn a simple idea into something people could actually play with.
The concept was simple: a small interactive puzzle game where you choose a scene, pick a difficulty, shuffle the pieces, and start playing.
Problem
From idea to playable experience
The game includes three difficulty levels, a collection of landscape and wildlife scenes, random mode, image preview, drag-and-snap interactions, and a local achievement panel that keeps track of the best number of moves.
It also works across desktop, tablet, and mobile, so the experience doesn’t fall apart when the screen gets smaller — because apparently even puzzle pieces have responsive design requirements.
Solution
Built with AI + Framer
The entire project was created in Framer, with custom code components and AI-assisted development.
I used GPT and the Framer Agent as part of the process — from exploring the idea and figuring out interactions to building, debugging, and iterating on the experience.
It was a good opportunity to experiment with a different kind of workflow: instead of designing everything first and building later, I could move quickly between idea, design, code, and testing.
Outcome
What I wanted to explore
This project wasn’t about solving a complex UX problem. It was about curiosity.
I wanted to explore how quickly a simple concept could become a polished, interactive experience when design, no-code development, and AI work together.
The result is a small game, but it became a useful playground for experimenting with interaction, responsive behaviour, custom components, and AI-assisted product building.
Reflection