5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb26,

Puzzle Reveal turns any image into a playable sliding puzzle that can reveal a hidden message, coupon code, or link when solved.

Use it as a quiet easter egg, launch promo, portfolio interaction, product teaser, hidden discount, or small reward moment inside a landing page. It can start as a normal image with a subtle Scramble button, so the interaction hides in plain sight and does not interrupt the page. Or it can start already scrambled when you want the challenge to be obvious from the beginning.

Replace the image, choose how the board behaves, set your reveal content, and publish.

Reveal Content

• Hidden message reveal

• Optional coupon code

• Copy-to-clipboard action

• Optional reveal link

• Edit label, message, code, link text, and reveal surface

Puzzle Behavior

• Start as a normal image

• Start already scrambled

• Public Scramble button for visitors

• Solve state with animated reveal

• Optional preview controls for demos and testing

Image and Layout

• Works with uploaded images

• Cover, contain, and stretch image fit

• Auto responsive board sizing

• Manual grid sizing

• Adjustable tile density

• Square-friendly by default

Styling and Motion

• Editable background and reveal colors

• Adjustable tile gap and radius

• Smooth tile movement

• Optional ghost trail effect

• Editable typography controls

• Clean editorial reveal state

Framer Workflow

• Organized sidebar controls

• Simple default setup

• Advanced controls stay tucked away

• Designed for square cards, landing page moments, launch pages, portfolios, promos, and interactive easter eggs

Suggested setup

Place the component inside a square or responsive frame, replace the image, choose Start mode, add your reveal message or coupon code, then publish.

For the cleanest use, start with a normal image and leave the public Scramble button on. For a more direct challenge, start the component already scrambled.

5a:[["$","$L5d",null,{"post":{"id":"019efb66-54a8-74ea-9980-4a7f0d125ffb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b708f648-11a8-487b-bdb5-48afa4fa59f1","name":"Rule & Form","slug":"ruleandform","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b708f648-11a8-487b-bdb5-48afa4fa59f1/tmq43o7e","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Rdut7TeEo4SUH4CzV6lA","resolved":true,"title":"Slider Puzzle Reveal","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Puzzle Reveal turns any image into a playable sliding puzzle that can reveal a hidden message, coupon code, or link when solved.","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Use it as a quiet easter egg, launch promo, portfolio interaction, product teaser, hidden discount, or small reward moment inside a landing page. It can start as a normal image with a subtle Scramble button, so the interaction hides in plain sight and does not interrupt the page. Or it can start already scrambled when you want the challenge to be obvious from the beginning.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Replace the image, choose how the board behaves, set your reveal content, and publish.","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Reveal Content","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Hidden message reveal","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional coupon code","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Copy-to-clipboard action","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional reveal link","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Edit label, message, code, link text, and reveal surface","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Puzzle Behavior","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Start as a normal image","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Start already scrambled","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Public Scramble button for visitors","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Solve state with animated reveal","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional preview controls for demos and testing","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Image and Layout","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Works with uploaded images","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Cover, contain, and stretch image fit","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Auto responsive board sizing","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Manual grid sizing","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable tile density","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Square-friendly by default","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Styling and Motion","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Editable background and reveal colors","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable tile gap and radius","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Smooth tile movement","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional ghost trail effect","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Editable typography controls","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Clean editorial reveal state","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Framer Workflow","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Organized sidebar controls","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Simple default setup","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Advanced controls stay tucked away","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Designed for square cards, landing page moments, launch pages, portfolios, promos, and interactive easter eggs","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Suggested setup","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a square or responsive frame, replace the image, choose Start mode, add your reveal message or coupon code, then publish.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"For the cleanest use, start with a normal image and leave the public Scramble button on. For a more direct challenge, start the component already scrambled.","marks":[{"type":"bold"}]}]}]},"introduction":"Responsive Puzzle with Reward","slug":"slider-puzzle-reveal","author":{"framerUserId":"b708f648-11a8-487b-bdb5-48afa4fa59f1","name":"Rule & Form","slug":"ruleandform","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b708f648-11a8-487b-bdb5-48afa4fa59f1/tmq43o7e","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b708f648-11a8-487b-bdb5-48afa4fa59f1/v8skxib1","metadata":{"tint":{"h":0,"s":0,"l":20},"width":1392,"height":732}}],"post":null,"createdAt":"2026-06-24T20:50:48.052Z","updatedAt":"2026-06-24T20:55:49.313Z","publishedAt":"2026-06-24T20:50:48.046Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/TilePuzzleReveal-1-BvpW20.js@nxbV0frnFpDcamDxrcjx","previewUrl":"https://puzzlegridreveal.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"nxbV0frnFpDcamDxrcjx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-24T20:50:48.104Z","updatedAt":"2026-06-24T20:50:48.104Z","reported":false}}],"$L5f"]

Suggested for you