Physics Based Puzzle

Interactive physics puzzle

About Drop in one image, set a grid size, and this component does the rest. Pieces tumble in under real physics (drag, throw, watch them bounce and settle), snap together as you place them correctly, and celebrate with confetti the moment the picture's complete. What's Included Real Matter.js physics - pieces fall, bounce, and drag naturally, no fake animation Works at any screen size - the win check is relational, not pixel-based Auto-detects mobile and can swap in a separate crop for portrait screens Best-time tracking with a "New Best" celebration, built entirely on local storage - no database, no signup Reference thumbnail with a tap-to-enlarge lightbox, so solvers can check their progress against the original Full custom sound design (impact, "getting warm," piece-merge, solve) with mobile-safe audio handling One-click restart button About 40 property controls - tune gravity, bounciness, tile size, colors, fonts, and every sound and flash color from the Framer panel, zero code required Zero backend - everything runs client-side, so there's nothing to configure or maintain after install Who it's for Photography portfolios and galleries - turn your best shot into something visitors spend two minutes with instead of five seconds Museums, exhibitions, and art sites - pair it with the built-in title / artist / year reveal card Editorial and blog sites - a daily puzzle brings people back the way a daily crossword does Any brand that wants one genuinely playful moment on an otherwise static site FAQ Does this need a database or backend? No. Best times and puzzle state live in the visitor's browser. Drop it in and it works. Can I use my own images? Yes. Any image, swappable any time from the Framer panel, including a separate crop for mobile. Can I change how it looks and sounds? Yes. Colors, fonts, tile size, bounce, gravity, every sound effect, and more are all exposed as properties — no code required.

Interactive physics puzzle