---
title: "Image to Puzzle Grid — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Netbloom · Interactive. Turn images into playable puzzles"
canonical: "https://framer.elliotli.dev/component/puzzle-grid"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Image to Puzzle Grid

# Image to Puzzle Grid

Turn images into playable puzzles

[View on Framer](https://framer.com/marketplace/components/puzzle-grid/?via=elliot-li)

![Image to Puzzle Grid preview image 1](https://framer.elliotli.dev/og/component/puzzle-grid/a4f2d20f074d1ff0/1600x1200.jpg)

## Summary

Turn images into playable puzzles

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10317

## Details

- **Author**: Netbloom
- **Price**: $15.00
- **Published**: 2025-08-13
- **Updated**: 2026-03-18
- **Added**: 2025-08-08
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step