5c: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"] 5d:Tbc0,

Frame Puzzle is an interactive Framer Code Component designed to increase visitor engagement and make promotions more memorable.

Players rotate four frame corners into their correct positions before the timer expires. When the frame is completed, the component calculates a score based on completion time and number of moves, then unlocks a corresponding discount reward.

How It Works

The visitor starts the challenge.
Four frame corners appear in random positions.
The visitor taps each corner to rotate it.
The goal is to complete the frame before time runs out.
The component calculates a score using completion time and number of moves.
The visitor receives a discount based on their score.
The visitor can copy the discount code or continue to the shop.

Key Features

Interactive frame puzzle
Score-based rewards
Countdown timer
Tiered discounts
Promo code generation
Copy-to-clipboard button
Custom shop link
Fully responsive
Touch-friendly controls
Smooth animations
Success & timeout states
Optional replay
No external libraries
Easy Framer customization

Customisation Options

The following settings can be changed from the Framer properties panel:

Component title
Instructions and description
Start-button text
Shop-button text
Shop destination URL
Game time limit
Accent colour
Background colour
Frame colour
Text colour
Corner radius
Replay availability

Default Reward Tiers

900–1,000 points: 20% off
750–899 points: 15% off
550–749 points: 10% off
Below 550 points: 5% off

The scoring and discount tiers can be changed inside the component code.

Ideal For

E-commerce
Frame & Art Stores
Photography
Interior Design
Marketing Campaigns
Product Launches
Seasonal Promotions
Landing Pages
Customer Engagement
Lead Generation

Installation

Copy the component into your Framer project.
Open the Assets panel.
Find Frame Puzzle under Code Components.
Drag the component onto your page.

No external dependencies are required.

For questions or support, visit: https://x.com/zedbuilds

59:[["$","$L5c",null,{"post":{"id":"019fb829-8f89-747f-bf4c-e3be4c16e3bc","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"681359a7-b09a-4640-ba7d-f131ba5f7ec5","name":"Zaid Anas","slug":"zed-anas","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/681359a7-b09a-4640-ba7d-f131ba5f7ec5/uljm7hny","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9K4VRPKKD9zCLueZdF3W","resolved":true,"title":"Frame Puzzle Game","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame Puzzle is an interactive Framer Code Component designed to increase visitor engagement and make promotions more memorable."}]},{"type":"paragraph","content":[{"type":"text","text":"Players rotate four frame corners into their correct positions before the timer expires. When the frame is completed, the component calculates a score based on completion time and number of moves, then unlocks a corresponding discount reward."}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The visitor starts the challenge."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four frame corners appear in random positions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The visitor taps each corner to rotate it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The goal is to complete the frame before time runs out."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The component calculates a score using completion time and number of moves."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The visitor receives a discount based on their score."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The visitor can copy the discount code or continue to the shop."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive frame puzzle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Score-based rewards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Countdown timer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tiered discounts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Promo code generation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy-to-clipboard button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom shop link"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch-friendly controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Success & timeout states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional replay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external libraries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy Framer customization"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customisation Options"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"The following settings can be changed from the Framer properties panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Component title"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Instructions and description"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start-button text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shop-button text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shop destination URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Game time limit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accent colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Replay availability"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Default Reward Tiers"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"900–1,000 points: 20% off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"750–899 points: 15% off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"550–749 points: 10% off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Below 550 points: 5% off"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The scoring and discount tiers can be changed inside the component code."}]},{"type":"customHeading","content":[{"type":"text","text":"Ideal For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"E-commerce"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame & Art Stores"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interior Design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Marketing Campaigns"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seasonal Promotions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing Pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customer Engagement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lead Generation"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Installation"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy the component into your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open the Assets panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Find Frame Puzzle under Code Components."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component onto your page."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"No external dependencies are required."}]},{"type":"paragraph","content":[{"type":"text","text":"For questions or support, visit: "},{"type":"text","text":"https://x.com/zedbuilds","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/zedbuilds","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"An interactive frame-building game","slug":"frame-puzzle-game","author":{"framerUserId":"681359a7-b09a-4640-ba7d-f131ba5f7ec5","name":"Zaid Anas","slug":"zed-anas","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/681359a7-b09a-4640-ba7d-f131ba5f7ec5/uljm7hny","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/681359a7-b09a-4640-ba7d-f131ba5f7ec5/019fbc6c-0889-76d9-9dd0-4d0c2f1a4baf.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2382,"height":1982}}],"post":null,"createdAt":"2026-07-31T12:32:38.950Z","updatedAt":"2026-08-01T08:23:55.825Z","publishedAt":"2026-07-31T12:32:38.941Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jubilant-operators-011291.framer.app/","price":"9","paymentUrl":"https://alkynstudio.lemonsqueezy.com/checkout/buy/0a99d9ce-5fd7-4e94-b0bf-0aa0f557daf0","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"UMv28zUXhGRHBsjAF2AR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-31T12:32:39.305Z","updatedAt":"2026-07-31T12:32:39.305Z","reported":false}}],"$L5e"]

Suggested for you