Scratch & Win Coupon

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.

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.