Build a Spin-the-Wheel Picker With AI (and Make the Spin Feel Fair)

A spin-the-wheel picker is deceptively simple. A circle split into colored slices, a pointer, a spin button, and a winner. It is also one of the few tools a whole room will lean in to watch. You can build a spin-the-wheel picker with AI in a few minutes, and it is a perfect first project because the whole thing fits in one file and the payoff is instant: you add names, you hit spin, something happens.

The catch is that the one part everyone gets wrong is the part that matters most, the randomness. Get that right and you have an honest, reusable tool. Get it wrong and you have a wheel that quietly favors certain names. This guide walks through building a random name picker that is fair, smooth, and good enough to put in front of other people.

TL;DR: List your entries first. Ask AI for a single self-contained HTML file with the wheel in SVG, a spin button, and a smooth easing animation. The key instruction: pick the winner in code with a proper random choice, then animate the wheel to land on that segment, not the other way around. Add weighting and a remove-the-winner mode with follow-up prompts. Publish it as a live link so your whole group can spin it on their phones.

Why build your own instead of using a wheel site?

There are plenty of free wheel-spinner sites. They are fine for a one-off. But building your own with AI gives you three things they do not: it looks exactly how you want, it does exactly what you want (weighting, remove-the-winner, a custom result message), and it is a single file you own and can drop anywhere. No ads, no sign-up wall, no “upgrade to remove the watermark.”

It is also just a great, low-stakes way to learn how to prompt for a small interactive app. The same pattern, list the content, describe the behavior, ask for one clean file, is exactly how you would build a quiz or a browser game. The wheel is the friendly version.

What does a good wheel picker actually need?

Before you prompt anything, it helps to see the parts. A wheel picker is five pieces working together.

1. The entries. The names or options the wheel chooses from. This is the only part that is truly yours, so write it first.
2. The wheel. A circle split into one segment per entry, each with a label and a distinct color.
3. The pointer. A fixed marker, usually at the top, that indicates the winning segment when the wheel stops.
4. The spin. A button that triggers a satisfying, decelerating rotation.
5. The result. A clear announcement of who or what won, ideally big and obvious.

Everything else, sound, confetti, a history of past spins, is a nice-to-have you can add later.

Try it: a wheel you can spin right now

Here is a working wheel built with the exact approach below. Hit the button and watch it go. This is live on the page, not a video, which is the whole point of sharing the real thing instead of a screenshot.

This demo uses a fixed stopping point so it works without any JavaScript. The real picker you build will land on a different segment every time, which is where the fairness question comes in.

How do you make the spin feel fair?

This is the one thing to get right, and it is the opposite of how it looks. The instinct is: spin the wheel to a random angle, then see which segment lands under the pointer and declare it the winner. That feels fair. It is not reliably fair. The result gets skewed by rounding, by segment sizes if they ever differ, and it makes weighting almost impossible to add later.

Do it backwards. Choose the winner first, in code, with a proper random pick. Then compute the exact angle that puts that segment under the pointer, and animate to it. The spin becomes pure theater, and the result underneath is honest and genuinely random. Say this explicitly in your prompt, because many AI drafts default to the biased version.

Two more details that make the motion feel good:

• Ease out, do not stop dead. The wheel should spin fast, then slow down smoothly to a halt. A cubic-bezier easing that decelerates near the end sells it. A linear stop looks broken.
• Spin several full turns. Add three or four complete rotations before the final angle so there is real motion, not a twitch. The demo above uses an eased deceleration over a few seconds.

The prompt that builds it

Write your entries in plain text first. Then paste them into a prompt that spells out the behavior. Here is a complete starting point you can copy and adapt:

Build me a spin-the-wheel random picker as a single self-contained HTML
file. No external libraries, no build step, everything inlined.

Entries (one segment each, use these exactly):
Pizza, Tacos, Sushi, Ramen, Burgers, Salad

Wheel:
- Draw the wheel in inline SVG, one colored segment per entry with the
  label centered and readable in each segment.
- A fixed pointer at the top marks the winning segment.
- A center hub and a clear Spin button.

Spin behavior (important):
- When Spin is clicked, first choose the winning entry in JavaScript
  using a uniform random index. Then compute the exact rotation that
  places that segment under the top pointer, and animate the wheel to
  that rotation. Do NOT decide the winner by reading the final angle.
- Spin at least 4 full turns, then ease out smoothly to a stop with a
  decelerating cubic-bezier over about 4 seconds.
- Disable the Spin button while it is spinning.

Result:
- When the wheel stops, show the winner in a large banner above or below
  the wheel, like "Winner: Tacos".

Style: clean and playful, bright segment colors with good contrast,
large tap targets, works well on a phone. Return the complete HTML file.

The lines that matter most are the ones under “Spin behavior.” Leave them out and you will likely get the biased version. If you want the model to reliably hand you one clean file instead of a fenced snippet you have to assemble, our guide on getting self-contained HTML from AI covers the exact phrasing.

How do you make it yours?

Once the base wheel works, improve it with plain-language follow-ups. This is where it goes from a demo to your tool. Iterating in small, specific steps is the whole skill, and it is the same loop covered in how to iterate on AI-generated pages.

• Editable entries. “Add a text box where I can paste a list of names, one per line, and a button to rebuild the wheel from that list.” Now it works for any group, not just dinner.
• Weighting. “Let each entry have an optional weight. Choose the winner in proportion to the weights, and size each segment to match its weight so the wheel stays honest.” This answers the common “can some options be more likely” question.
• Remove the winner. “Add a mode where the winning entry is removed from the wheel after each spin, so I can use it to draw a random order.” Great for picking a speaking order or a turn order.
• A little flourish. “Play a short tick sound as it spins and show a burst of confetti on the result.” Small touches, big difference in how it feels.

Add these one at a time and test after each. If a change breaks something, the fix is usually a precise follow-up like the ones in polishing an AI page with follow-up prompts.

Test it before you share

A wheel that works for six dinner options can fall apart on real input. Spin it a lot, and deliberately try the awkward cases:

• Two entries. Does it still look and spin like a wheel, or collapse into a half-and-half circle that looks odd?
• A dozen or more entries. Do the labels still fit and stay readable? You may need smaller text or labels that rotate to follow each slice.
• Very long names. “Alexandra from the marketing team” should not spill out of its segment. Ask for truncation or wrapping.
• The same result twice in a row. That is allowed with real randomness. If it feels wrong for your use, that is when you want the remove-the-winner mode, not a rigged spin.

Spin thirty or forty times and keep a rough tally. If one name keeps winning far more than its share, the randomness is off, usually the biased “read the angle” version. Send it back with the fairness instruction from above.

Build your own vs a wheel-spinner website

Here is an honest comparison of the ways to get a spinning wheel in front of a group.

The first three each have a catch. The free sites box you into their look and their limits. A screenshot is dead on arrival, nobody can spin a picture. Keeping the file solves the customization, but it still sits on your laptop where no one else can use it. The last row is where it becomes a tool other people actually touch.

Get it in front of people

A wheel picker is only fun when more than one person can spin it. That is the last step, and it is where most AI projects stall, because the working file is stuck in a chat window or a folder on your machine.

This is where VisiblePage fits. Paste your wheel’s HTML, or drop a ZIP if the AI split it into files, and you get a live URL in seconds. Every part keeps working on the real page: the spin animation, the sound, the result banner, the editable entries. Because you are sharing the actual page and not a screenshot, someone can open the link on their phone in a meeting and spin it live. Set the page public for a giveaway, or password-protect it for an internal draw. And because it is one canonical link, when you update the entries and republish, everyone’s link shows the new wheel. No “wheel_final_v2.html” making the rounds.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

Can AI really build a working spin-the-wheel picker? Yes. A wheel picker is a small, self-contained web app: a circle split into labeled segments, a spin animation, and a rule for picking the winner. That is exactly the kind of thing a capable model builds in one conversation. If you can list the entries and state how a winner should be chosen, the AI writes the SVG drawing, the randomness, and the easing for you.

How do I make the spin actually fair? Pick the winner in code first, with a proper random choice, then animate the wheel so the pointer lands on that segment. Do not let the final angle decide the winner by eye. Tell the AI to choose the result with a uniform random index, compute the stopping angle from that, and only then run the animation. Repeat spins are then genuinely random.

Can I make some entries more likely than others? Yes, that is weighting. Give each entry a weight and the picker chooses in proportion to those weights instead of giving everyone an equal slice. Ask the AI for weighted selection and, if you want, slice sizes that match the weights so the wheel looks honest. It is the same picker with a different random rule.

How do I share the wheel so other people can spin it? Ask the AI for one self-contained HTML file, then publish it to a host that gives you a live URL. With VisiblePage you paste the HTML or drop a ZIP and get a shareable link right away, with the spin animation and buttons still working. Send that link in a group chat and everyone can spin the same wheel on their own phone.

Will the wheel still spin when I share it? Only if you share the real page instead of a screenshot. A picture of a wheel cannot be spun. Publish the HTML as a live page and the spin, the sound, and the result screen keep working for whoever opens the link, on any device.