---
title: "Scratch & Win Coupon"
canonical_url: "https://framerhub.io/components/scratch-and-win-coupon"
last_updated: "2026-06-15T14:46:31.263Z"
---

## Scratch & Win Coupon

Boost engagement and conversion rates with a fun, interactive scratch card experience. Perfect for revealing discount codes, special offers, or secret messages.

## Features

**Animated Shine Effect**
A premium, animated silver foil effect that catches the eye. The shine seamlessly disappears as the user scratches.

**Confetti Celebration**
A delightful confetti ribbon animation triggers automatically when the prize is revealed, adding a layer of reward and excitement.

**Smart Scratching**
Smooth, interpolated scratching ensures that fast mouse movements create continuous lines instead of dots.

**Custom Content Slot**
Connect any Frame or Component to serve as the "Prize" layer. This gives you unlimited design freedom for the winning state.

**Fully Customizable**
Change everything from the scratch overlay color and text to the prize background, fonts, borders, and reveal behavior.

**Auto-Reveal**
Automatically reveals the entire card once the user has scratched off a specific percentage, ensuring the prize is always seen.

**Performance Optimized**
Built with HTML5 Canvas for 60fps performance on all devices, using efficient offscreen buffering.

## Use Cases

**E-commerce Discounts**
Hide a discount code behind a scratch card to make earning a coupon feel like a win.

**Product Reveals**
Tease a new product launch by letting users "scratch" to see a sneak peek.

**Gamified Signups**
Reward users for signing up to your newsletter with a chance to scratch and win a prize.

![Scratch & Win Coupon Preview](/framerhub/img/components/control/scratch-and-win-coupon.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find **Scratch & Win Coupon** in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

You can fully customize the appearance of both the "before" and "after" states.

**Card Styles**

- **Border**: Customize the color, width, and radius of the card border to match your brand.

**Scratch Layer**

- **Scratch Color**: The color of the foil to be scratched away.
- **Scratch Image**: Upload a custom pattern or texture (e.g., silver foil texture) for more realism.
- **Scratch Text**: Add a call to action like "SCRATCH ME".

**Prize Layer**

- **Prize Label & Code**: Configure the text that appears after scratching.
- **Prize Background**: Set a festive background color or image for the winning state.

**Confetti Settings**

- **Enable Confetti**: Toggle the celebration effect on/off.
- **Colors**: Customize the confetti ribbon colors.

**Custom Prize Design**

- **Custom Content**: Connect any Frame or Component to the `Custom prize` connector to use your own design. This will hide the default text controls.

### Quick Tips

**Best Performance** — Keep the **Brush Size** around 20-30 for the most satisfying feel. Too small makes it tedious; too large makes it too easy.

**Reveal Threshold** — Set the **Reveal %** to around 50-60%. This ensures users don't have to hunt for every last pixel of foil to see their prize.

**Mobile Friendly** — The component handles touch events automatically, so it works great on smartphones.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

It adds a moment of delight and surprise to an otherwise static web page. The tactile feel of "scratching" something digital is incredibly satisfying and significantly increases user interaction time.

---