Image to Puzzle Grid

Turn images into playable puzzles

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.

Turn images into playable puzzles