Image to Puzzle Grid | Framer Component

Turn any image into a fun, interactive grid puzzle with this highly customizable component. Offers a variety of controls to tailor the puzzle's difficulty and appearance.

✨ Experience Image to Puzzle Grid: https://www.framer.com/marketplace/components/puzzle-grid/

Details

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.

Features

• 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.

Controls

• 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.

Policy

Due to the nature of digital products, this product is non-refundable. We encourage you to read all the details, view and explore the product as much as you need prior to purchase.

Contact

For any questions or support, email [email protected] - we're here to help.