Spin to Win Wheel and Discount Popups for React
ReactFrame has 7 React components for offers and lead capture (6 free): spin-to-win wheels, scratch cards, dice-roll discount popups and a ticket-shaped promo popup, plus an announcement bar and a countdown timer for urgency.
How to choose
- Collect emails with a game: spin-to-win-wheel, scratch-card-popup, dice-roll-discount-popup.
- A simple promo in the corner: sales-ticket-popup.
- Site-wide sale messaging: announcement-banner with countdown-timer.
- Show one popup per visit at most, and never before the visitor has seen the page.
All 7 components
- Spin to Win WheelFree
- A gamified discount-capture widget where visitors spin a weighted SVG prize wheel for a reward, with five glass themes, a themed reveal modal and code copy, rendered inline or as a corner-launched popup with manual/delay/scroll triggers.
- npx shadcn@latest add https://reactframe.com/r/spin-to-win-wheel.json
- Scratch Card PopupFree
- 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.
- npx shadcn@latest add https://reactframe.com/r/scratch-card-popup.json
- Dice Roll Discount PopupFree
- A gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and code copy, rendered inline or as a corner-launched popup with manual/delay/scroll triggers.
- npx shadcn@latest add https://reactframe.com/r/dice-roll-discount-popup.json
- Dice Discount PopupFree
- A gamified discount popup, roll two animated 3D dice for a reward tier (with a doubles bonus), copy the code, and track rolls left across a session. Inline or corner-widget popup with manual, delay or scroll triggers.
- npx shadcn@latest add https://reactframe.com/r/dice-discount-popup.json
- Sales Ticket PopupFree
- A corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub, immediate/delay/scroll triggers, auto-hide, and dismiss-memory.
- npx shadcn@latest add https://reactframe.com/r/sales-ticket-popup.json
- Announcement BannerPremium
- A drop-in announcement bar with a flip-digit countdown, one-click coupon copy, a seamless ticker mode, and light/dark themes.
- Countdown TimerFree
- Counts down to a duration or an absolute end date, with flip-cell digit transitions, a compact text mode, and an optional loop.
- npx shadcn@latest add https://reactframe.com/r/countdown-timer.json
Questions
- Can I change the prizes and odds?
- Yes. Each theme's prize list, with a weight per prize for its odds and the discount code it reveals, lives in the component source you install, so edit it to your own offers. Validate codes on your server before applying a discount.
- Are these components free?
- 6 of the 7 are free (Spin to Win Wheel, Scratch Card Popup, Dice Roll Discount Popup, Dice Discount Popup, Sales Ticket Popup, Countdown Timer); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.