Spin the Wheel

A prize wheel with real odds you define. The animation lands on the prize that was actually drawn, every time.

Copied 0 times.

▼

you@email.com

Try it: click Spin. The prize is drawn by weight before the wheel moves.

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a spin-the-wheel promo game for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A centered wheel (SVG, about 320px on desktop, scaling down responsively) divided into equal visual segments, a fixed pointer at the top, and a Spin button below.
- Six segments of 60 degrees each: labels stay large and readable.
- Segment labels come from the config; alternate two or three brand-derived segment colors with WCAG AA readable label text.
- Email gate: an email input and consent line sit above the Spin button, and the button stays disabled until a validly formatted email is entered. On spin, hand the email to my email tool or backend (clearly marked TODO), and state plainly next to the field what the email will be used for. Never hide the terms.

ODDS AND HONESTY (non-negotiable)
- Segments AND their odds live in one config array: { label, prize code or value, weight }. The draw picks a segment by WEIGHT (weighted random over the configured weights), fully decoupled from the equal visual slice sizes.
- The wheel animation must land exactly on the segment that the draw selected: compute the target rotation from the drawn index (plus 4-6 full turns), never pick the winner from wherever an animation happens to stop, and NEVER show a near-miss or rigged stop. If the code displays an outcome different from the draw, that is fraud; say so in a comment.
- Empty config or zero total weight = the game does not render. Prizes must be real and honored; a clearly marked TODO tells me to define real prizes, weights, and redemption (code display or email), and to check the legality of prize promotions in my market.
- One spin per visitor: set a localStorage flag on spin; the wheel shows its result state on return.

BEHAVIOR
- Spin animates 3-4 seconds with ease-out deceleration; respect prefers-reduced-motion by shortening to under 1 second. Disable the button during the spin.
- The result shows in a clear message under the wheel (prize label and how to redeem), also announced via aria-live="polite".

QUALITY
- The Spin button is a real button, keyboard operable, visible focus ring; wheel labels are real text in the SVG.
- No layout shift: the wheel area has fixed dimensions from first paint.

QUESTIONS
- Before you build, find or ask for: my real prizes with their weights and how each is redeemed, and which email tool receives addresses if the email gate is on. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

Spin the wheel is the promo game nobody can resist trying, which is exactly why it's so good at collecting emails and handing out discount codes. Someone spins, the wheel slows, and a prize lands with a satisfying stop. Try it yourself in the preview.

You set the prizes and their odds; the winner is picked before the wheel even moves.
The animation is calculated to land exactly on that prize, every time.
Rigged stops and fake almost-wins are flat-out forbidden in the code, by name, as fraud.
The result shows under the wheel, with how to redeem it.
Every visitor gets exactly one spin, which their browser remembers.

How it works

1Pick 6 or 8 wheel slices, decide whether spinning costs an email or is free for everyone, and take a test spin in the preview.
2Copy the prompt, everything your AI needs for the build, into whichever AI you use.
3Your AI builds the wheel, the fair prize draw, and the spin animation in your site's own colors and fonts, with one marked spot for your prize list.
4Fill in your real prizes, their odds, and how winners claim them; a note in the code reminds you to check the prize rules in your country.
5The winner is drawn from your odds before the wheel moves, and the 3 to 4 second spin stops exactly on that slice, every time.
6Spin once and reload the page: you should see your result again, not a fresh game, because everyone gets just one spin.

What you can customize

How many slices: six keeps the labels big and easy to read; eight fits more prizes but keeps labels to two words.
Email gate: email to spin unlocks the button once a real address is typed in, with plain wording about what it's used for; free spin lets anyone play.
Colors, labels, and prizes adapt to your brand, because your AI builds the wheel right inside your own design.

You'll also like

Daily rewards

Try it: tap today's tile. The reward is drawn by weight before it opens.

Daily Reward Calendar

A row of day tiles, one claim per real day. Rewards drawn from your weighted config before the animation.

↔BeforeAfter

Before / After Slider

A draggable comparison of two images: same subject, real photos, and a divider the reader controls.

How was your experience today?

😠🙁😐🙂😍

Micro Survey Popup

A one-question feedback widget with an emoji scale. Two taps to answer, zero friction, real data to your backend.