---
title: "ScratchOfferCard — Free Framer component · Best of Framer"
description: "Free Framer component · by Nakul · Interactive. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/scratchoffercard"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/ScratchOfferCard

# ScratchOfferCard

The offer you win.

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

![ScratchOfferCard preview image 1](https://framer.elliotli.dev/og/component/scratchoffercard/f4696ede90f9d602/1600x1200.jpg)

## Summary

The offer you win.

## Description

## About:

The brain can't leave an incomplete task alone. it's called the Zeigarnik Effect. A scratch card turns your offer into a tiny mission users need to finish. That compulsion drives dwell time, engagement, and the kind of micro-delight that makes people share your page. Drop this onto any Framer canvas, set your coupon code and headline, tune the reveal threshold, and your next launch has an interaction worth remembering. After scratching past the threshold, a premium dark card surfaces. showing your discount value, coupon code, and a one-click copy button. Fully customizable: swap in your own code, headline, sub-text, and brand colors.

## Features:

• Smart auto-reveal

• Confetti celebration

• One-click copy button

• Touch-optimized

• Framer-native events

## Customization:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-sdyh62y8-k9T5kkkBp3n1x2wPnEKX1BjRo0xKig)

## How to use:

1\. Duplicate to your project - Click "Duplicate" on the Framer Marketplace listing and open your canvas.

2\. Drop it on the canvas - Drag the Scratch Card component from your Assets panel onto any frame or section.

3\. Set your offer details - In the properties panel, enter your discount headline, coupon code, and sub-text.

4\. Tune the threshold - Adjust reveal Threshold (default: 60%) to control how much scratching triggers the auto-complete.

5\. Connect & publish - Wire the on Reveal event to any downstream Framer action, then hit publish.

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

-   All · #6783

## Details

- **Author**: Nakul
- **Published**: 2026-04-28
- **Updated**: 2026-06-18
- **Added**: 2026-04-21
- **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