✨ Experience Image to Puzzle Grid

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.

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 support@netbloom.dev - we're here to help.