Physics Based 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.