---
title: "Frame Puzzle Game — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Zaid Anas · Interactive. An interactive frame-building game"
canonical: "https://framer.elliotli.dev/component/frame-puzzle-game"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Frame Puzzle Game

# Frame Puzzle Game

An interactive frame-building game

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

![Frame Puzzle Game preview image 1](https://framer.elliotli.dev/og/component/frame-puzzle-game/dd086c7a4a76ba8f/1600x1331.jpg)

## Summary

An interactive frame-building game

## Description

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

1.  The visitor starts the challenge.
    
2.  Four frame corners appear in random positions.
    
3.  The visitor taps each corner to rotate it.
    
4.  The goal is to complete the frame before time runs out.
    
5.  The component calculates a score using completion time and number of moves.
    
6.  The visitor receives a discount based on their score.
    
7.  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

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

No external dependencies are required.

For questions or support, visit: [**https://x.com/zedbuilds**](https://x.com/zedbuilds)

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

-   All · #4416

## Details

- **Author**: Zaid Anas
- **Price**: $9.00
- **Published**: 2026-07-31
- **Updated**: 2026-08-01
- **Added**: 2026-07-31
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase