Overview
A spinning decision wheel drawn on canvas: paste up to 16 options, spin, and let the animation pick one for you. Slices are coloured from a fixed palette, the spin decelerates naturally over about three seconds, and the winning option is read directly from the wheel's final angle — so the result is decided by geometry, not chosen in advance.
How It Works
Type your options into the text area, one per line; blank lines are trimmed away and the list is capped at 16 entries. The wheel redraws live as you edit, with labels rendered radially on each slice. Press SPIN THE WHEEL and the wheel rotates five to eight full turns with an ease-out curve, slowing to a stop after roughly 3.2 seconds. The option under the pointer triangle at the top is announced as the winner in a green panel and a toast.
Step-by-Step Usage Guide
- Paste your options, one per line, up to 16.
- Watch the wheel redraw as you edit the list.
- Press SPIN THE WHEEL and let the animation finish.
- Read the winner from the green panel, then spin again if needed.
Technical Specifications & Standards
The wheel is rendered with the Canvas 2D API: each option gets an equal slice of 2π divided by the option count, painted in one of eight colours that repeat for larger lists, with labels truncated to about 14 characters so text stays inside its slice. The spin animation uses requestAnimationFrame over a fixed 3.2-second duration with a cubic ease-out, adding five to eight random full turns to the current angle. The winner is not pre-decided and then animated toward; the final rotation is chosen at random up front, and the code computes which slice sits under the pointer (positioned at the top, −90 degrees in canvas space) once the rotation settles. That means the animation is a faithful rendering of the random draw. Two honest notes: every option gets an equal slice, so no weighting is possible, and you need at least two non-blank options before the spin button activates. Your option list lives in component state only — it does not survive a page refresh.
Targeted Use Cases
- Settling a lunch decision among teammates in a stand-up.
- Drawing a giveaway winner from a list of entrants on a call.
- Picking which student answers next in a classroom.
- Breaking a tie when a group cannot agree and everyone accepts the wheel.
Notes & Gotchas
- Keep option labels short; long names are truncated on the slice.
- Remove blank lines so hidden empty slices do not dilute the draw.
- Decide before spinning that everyone will honour the result.
- Save the list elsewhere if you will need it again — it is not persisted.
Frequently Asked Questions
Is the wheel rigged or random?
The final rotation is drawn at random and the animation renders it faithfully; the winner is computed from the settled angle under the pointer. No option is favoured, and every option receives an equal slice.
How many options can the wheel hold?
Up to 16. The list is trimmed to the first 16 non-blank lines, and at least two options are required before the spin button enables.
Can I weight options so some win more often?
No. Slices are equal in size by design. To weight an option, list it multiple times — each copy gets its own equal slice.
Do my options survive a page refresh?
No. The option list lives in component state and returns to the default food-themed sample on reload. Copy the list out if you want to reuse it.