Playable 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.
Make it with Workshop
Build your own component with AI
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.
