Scratch Card Popup React component
A gamified scratch-to-win popup, drag to scratch a gold-foil canvas off a 3x3 icon grid, match three to win a reward tier with a confetti burst, copy the code, and track attempts left. Inline or corner-widget popup with manual, delay or scroll triggers.
About the Scratch Card Popup component
Scratch Card Popup is a free scratch-to-win card. Visitors drag to wipe gold foil off a 3x3 grid of icons, and once about 42% is cleared, or they press 'Reveal instantly', the card shows three matching crowns, a confetti burst and a prize with a code to copy. It works inline or as a floating corner widget that opens it in a modal.
theme picks ecommerce, campaign, restaurant, saas or event, and each theme's title, colors and three prizes with codes live in the THEMES object in the source. freeAttempts (default 3) sets how many cards a visitor gets, and asPopup, trigger (manual, delay or scroll), delaySeconds and widgetPosition control the widget. Scratching works with mouse and touch. The scratch progress is a progressbar, the prize is announced in a polite status region and the modal closes with Escape.
When to use it
Use it for welcome offers, restaurant or cafe promotions, early-bird event perks and seasonal campaigns, where a quick game makes the offer memorable.
For a dice mechanic, use Dice Discount Popup. For a simple offer card, use Sales Ticket Popup.
Installation
Add the Scratch Card Popup component to your project with the shadcn CLI. It lands in components/scratch-card-popup.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/scratch-card-popupOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ScratchCardPopup /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "ecommerce" | "campaign" | "restaurant" | "saas" | "event" | "ecommerce" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| freeAttempts | number | 3 |
- theme"ecommerce" | "campaign" | "restaurant" | "saas" | "event"Default: "ecommerce"
- asPopupbooleanDefault: false
- trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- freeAttemptsnumberDefault: 3
Kits
Sets of components designed to be used together on one site, Scratch Card Popup included.
Collections
Use-case pages that compare Scratch Card Popup with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Scratch Card Popup FAQ
- Can a visitor lose?
- No. The grid always contains three crowns, so every card wins. The prize is picked at random from the theme's list, skipping the one just won. Edit DEFAULT_IMAGES and the prize list in the source to change the odds.
- Are the codes validated?
- No. Codes such as GOLD50 or CAFE15 are plain strings in the source, and the draw happens in the browser. Set up matching codes in your checkout, and validate and rate-limit them server-side.
- Do attempts survive a reload?
- No. attemptsLeft and rewards are React state only, so a refresh starts again at freeAttempts. Track claims on your server if limits matter.
- Is there an alternative to dragging?
- Yes. The 'Reveal instantly' button uncovers the card without scratching, and it is reachable by keyboard.
