Image to Puzzle Grid (Framer Component)

Turn any image into a fun, interactive grid puzzle with this highly customizable component. Offering a variety of controls to tailor the puzzle's difficulty and appearance, it's a perfect way to create a memorable, engaging experience for your users, whether for a "coming soon" page, a mini-game or a unique way to reveal a key image on your site.

Use Any Image – Instantly transform any image from your assets into a fully functional puzzle grid.

Customizable Grid – Easily set the puzzle's difficulty by choosing the number of pieces, from a simple 2x2 grid up to a challenging 12x12.

Interactive Drag & Drop – A smooth and intuitive interface allows users to pick up and move pieces around the canvas.

Satisfying Snap-to-Place – Pieces automatically snap into their correct position when dropped nearby, providing clear and rewarding feedback.

Instant Scatter – Choose to have the pieces automatically scattered across the board on load for an immediate challenge.

Visual Feedback – A subtle hover effect highlights the piece under the cursor, while the currently dragged piece is brought to the front with a customizable border and shadow.

Fully Responsive – The puzzle and its pieces seamlessly adapt to any component size and aspect ratio.

Image – Upload any image to serve as the puzzle's source.

Grid Size – A slider to control the number of pieces per row/column (e.g., 4 for a 4x4 puzzle).

Scatter on Load – A toggle to randomly scatter the puzzle pieces when the component first loads.

Hover Effect – Enable or disable the highlight that appears on pieces under the cursor.

Snap Distance – A slider to adjust how close a piece must be to its correct spot to snap into place.

Drag & Hover Border Color – A color picker to set the border color of the piece currently being dragged and the color of the pieces when being hovered.

Drag Border Width – A slider to control the thickness of the dragged piece's border.

Border Radius – Easily match the component's corner radius to your design.