5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:Ta6a,

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.

5b:[["$","$L5e",null,{"post":{"id":"0198a585-3ce3-7601-b2ec-1830a35b2cd0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[],"resources":[{"id":"R7PqWeF39kKRhHi8gzri","resolved":true,"title":"Image to Puzzle Grid","body":"$5f","bodyJson":null,"introduction":"Turn images into playable puzzles","slug":"puzzle-grid","author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/R7PqWeF39kKRhHi8gzri/puzzle-grid-R0PCIFe6HCEEuTssjBOcY0RqnY3ATd","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-08T23:40:43.045Z","updatedAt":"2026-03-18T04:35:25.136Z","publishedAt":"2025-08-13T22:20:29.283Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://puzzlegrid.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_joIBptQaX31sLV8AQHlAQuhIBdtD2dDSK5iAU0JgbJf?utm_source=framer&utm_medium=marketplace&utm_campaign=puzzle","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LRcYDqJ74SEeqtVSp8C4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-13T22:20:29.283Z","updatedAt":"2025-08-13T22:20:29.283Z","reported":false}}],"$L60"]

Suggested for you