Wheel of Names: how to make 'just spin it' actually fair

The spin is theatre. The math is fair (or not).

Here is a thing nobody tells you about wheel pickers: the spin itself is not randomness. It is animation. The wheel has already chosen the winner before the first frame plays — the code generates a random index, looks up the winning slice, and then rotates the wheel by exactly the right angle to make that slice land at the pointer. The deceleration curve, the wobble, the satisfying click as it slows down, all of that is decoration. The random number was decided in the first millisecond after you clicked Spin.

This sounds underwhelming until you realise the alternative is worse. A wheel that is "really" spinning — actually physically simulating angular momentum and friction — is hard to get right. The friction model has to be uniform, the starting velocity has to be uniformly random, and the angle landed on has to be uniformly distributed across all the slices. Get any of those wrong and you have a biased wheel. Picking the winner first and animating to it lets the underlying randomness be provably uniform, which is what you actually wanted in the first place.

Where the randomness should come from

The most common way to pick a list index is const winner = items[Math.floor(Math.random() * items.length)]. For a casual spin that is fine: modern browsers produce Math.random() values precise enough that any unevenness across a list of names is far too small to matter. Its real limitation is that it is a fast, general-purpose pseudo-random generator, not a cryptographic one — it was never designed for draws that have to stand up to scrutiny, like a giveaway with real prizes attached.

The stronger option is crypto.getRandomValues(), the browser's built-in cryptographic random source. It hands you whole random integers rather than fractions, and that brings in a trap of its own: turning a 32-bit integer into a list index with the modulo operator slightly favours the lower indices, because 2³² rarely divides evenly by the list length. The fix is rejection sampling: if the draw lands in the leftover chunk at the top of the range that would cause the imbalance, throw it away and draw again. Every value that survives maps to an index with exactly equal odds.

Our Spinner Wheel Picker works this way. The winning index is chosen with crypto.getRandomValues plus rejection sampling, the angle is computed from that index, and only then does the visible animation start. The math is uniform, and the show is just to make the result feel earned.

Multi-wheel: combined picks vs independent picks

A common ask is "spin a person and a task at the same time." A naive multi-wheel will spin both wheels with the same random seed and just display them side by side. That looks fine, but it has a subtle problem: if you ever want the two picks to influence each other (e.g. "the person picks first, then the task is from a subset that matches"), you need them to be independent draws, not coupled.

The right model for combined picks is to draw each wheel independently, then animate them in parallel. The Multi-Wheel Picker is built around this — you can fill two or three wheels side by side, and one click spins them all, with each wheel drawing independently. So "person + task + duration" produces a fair combination every time you spin.

Lottery balls: same math, different theatre

Some events want a different kind of drama. A wheel feels good for "one winner from twenty names." A bouncing-balls lottery feels good for "one winner from one hundred names" — there is something about the physics of balls in a bin that reads as more random, even though it is computed the same way.

The Lottery Ball Pit Picker is a deliberate stylistic alternative to the wheel. The math is identical — pick a random winning index up front, then animate that ball leaving the pit — but the presentation is very different. It is also kinder to large lists. A wheel with one hundred slices is unreadable; a ball pit with one hundred bouncing balls is delightful. For livestreams or in-room events with bigger groups, the ball pit often plays better than the wheel.

Reduced motion and accessibility

The flip side of "the spin is theatre" is that some people physically cannot watch the theatre. Vestibular disorders, migraines, and motion sensitivity make long-spinning wheels actively painful. Operating systems expose a prefers-reduced-motion media query for exactly this case.

A well-built wheel respects that setting. When the browser reports reduced motion, the wheel should still pick a winner — that is the whole point — but it should skip the animation. Our wheel does exactly that: with reduced motion on, it jumps straight to the winning slice. The ball pit skips its bouncing animation too: it draws the balls as a still picture, rings the winning ball, and shows and announces the winner's name. We recommend testing anything else you build against the same toggle.

When NOT to use a wheel

Wheels are great for events where the dramatic reveal is part of the value: live streams, classroom rituals, draw-the-winner moments. They are terrible for anything where you want to record the result, distribute it programmatically, or pick more than one winner at once. For those cases, use a list-based picker — the Random List Shuffler for a full ordering, the Random Multiple Winners tool for N distinct winners, or the Raffle / Giveaway Drawer for weighted multi-ticket draws.

The reason is simple: spinning a wheel three times in a row to find three winners is slow and visually awkward, and you also have to remember to remove the previous winner each time. A purpose-built multi-winner picker handles all of that in one click and is faster to copy into a spreadsheet afterwards.

The short version

Spinning wheels are great when the drama is part of the point. Behind the animation, the only thing that actually has to be right is the random number that chose the winner — and the most robust way to get that right is the browser's cryptographic randomness source with rejection sampling, so no index is favoured. Once that is in place, the spin can be whatever shape you want.