Hi everyone! 
I wanted to share a project I’ve been building almost entirely using Cursor Composer. It’s called The Puzzle Ads – think “The Million Dollar Homepage” but as an infinite, procedurally generated jigsaw puzzle.
Link: https://www.thepuzzleads.com/app
What’s under the hood?
The core challenge was generating unique, interlocking puzzle pieces that work on an infinite canvas. I used Cursor to help write the SVG path logic so that:
- Every piece has a unique ID and shape.
- The “Tabs” (knobs) and “Slots” (holes) mathematically match their neighbors perfectly (no gaps!).
- It supports infinite pan & zoom (like Figma or Miro).
How Cursor helped:
I’m using the “Composer” feature heavily. One of my favorite moments was prompting it to “fix the sub-pixel gaps between SVG paths by rewriting the coordinate logic,” and it successfully refactored the entire rendering function to be pixel-perfect.
It handled the complex math for the cubic bezier curves (to make the puzzle pieces look “bulbous” and real) much faster than I could have calculated manually.
Tech Stack:
- Framework: Next.js (App Router)
- Styling: Tailwind CSS
- Database: Postgres (via Neon)
- Payments: Stripe (Webhooks for auto-claiming pieces)
I’ve seeded the board with some favorite dev tools (Ray.so, Iconoir, etc.) to show how the logo masking works.
Would love to hear your feedback on the UX/performance! 