Build your Spin-the-Wheel decider with AI in under 5 minutes

Build a spin-the-wheel decision maker with a customisable entry list, weighted slices, raffle mode, and a carnival-marquee aesthetic — entries and history live in browser storage, nothing leaves the page.

Comment ça fonctionne

Étape 1

Décrivez votre idée

Rédigez une invite en texte libre décrivant ce que vous souhaitez.

Étape 2

L'IA le construit

FloopFloop génère instantanément du code prêt pour la production.

Étape 3

Déployez et passez en ligne

Votre projet est hébergé sur son propre sous-domaine en quelques minutes.

Pourquoi créer avec l'IA plutôt que de faire appel à un développeur ?

	FloopFloop	Développeur traditionnel
Délai de lancement	Moins de 5 minutes	2 à 8 semaines
Coût	À partir de 0 $	5 000 $ - 50 000 $+
Maintenance	Incluse	Prestataire récurrent

What is a spin the wheel?

A spin-the-wheel decider is the most universally useful client-side tool that exists — a teacher uses it to call on students at random, a streamer uses it to pick a giveaway winner from chat, a friend group uses it to decide where to eat without anyone feeling personally responsible for the choice, and a marketing team uses it to draw a prize from a sponsored entry pool. The category has settled around a couple of hosted sites (wheelofnames.com, pickerwheel.com, wheeldecide.com) which work fine but all log the entries you type, gate the most useful features (weighted slices, sound effects, custom colours) behind a sign-in, and surround the wheel with ads. None of which is necessary — the actual functionality is a polar-coordinate SVG and a cumulative-sum random pick. Owning the page yourself means you control the look, the entry list never leaves your browser, and you can extend the wheel with whatever your specific use case needs (URL-encoded sharing, CSV import, sound effects, a Tiktok-friendly portrait layout) by asking the AI for one more prompt.

Common features

Polar-coordinate SVG wheel with one slice per entry, in entry order
Per-entry weight column — bigger weight = bigger slice + higher win chance
Eight-colour palette cycled by index so the same list always looks the same
Cumulative-sum weighted random pick — winner decided before the spin starts
6–8 full rotations on each spin with cubic-bezier deceleration over ~5.8s
Confetti burst spawned imperatively on winner reveal (auto-cleans after 3s)
Raffle mode — toggle to remove the winning entry from the wheel after each spin
Last-20-spins history list with relative timestamps ('5m ago', '2h ago')
localStorage persistence — entries, history, and the raffle toggle survive reloads
Single client-component island on a force-static page — CDN-cachable

Real-world examples

Classroom random-name caller

Teacher loads the wheel with the class roster at the start of term. Each lesson the spin replaces 'who wants to answer this?' with a fair random pick. Raffle mode keeps the same student from being called twice in a row; turning it off mid-lesson lets a student be picked again for a follow-up question.

Livestream giveaway picker

Streamer pastes the giveaway entrants (paid sponsors get weighted slices), spins on camera, the winner modal pops with a confetti burst and the streamer's audience sees the result in real time. The running history list doubles as proof that no entry was added between the spin and the announcement.

What-should-we-eat decider

Group of friends loads up their favourite local restaurants, spins to settle the decision, and nobody has to be the person who picked. Save the wheel to localStorage and the next time it's pizza-or-tacos night the same options are still there — no list to retype.

Why FloopFloop fits spin the wheel projects

The reason wheelofnames-style sites exist is that the underlying math is tiny — a slice array, a weighted random pick, a CSS transition. What FloopFloop ships on top of that is the *visual identity*: a carnival marquee with a striped cream backdrop, a marquee bulb border around the wheel that reads like a fairground sign, a chunky red Spin button with the kind of bottom-shadow press effect arcade games used to have, and confetti that drops when a winner lands. Five style variants (classic carnival, Vegas casino, pastel game-show, glitch arcade, birthday rainbow) cover the obvious use cases without making every wheel on the internet look the same. And because the whole tool is client-side, the visual is the only thing differentiating yours from anyone else's — exactly the dimension where AI-generated styling beats every hosted competitor.

Essayez ces invites

Copiez l'une des invites ci-dessous et collez-la dans FloopFloop pour commencer.

Build a spin-the-wheel decision maker. Single page: a circular SVG wheel with one slice per entry, a chunky 'Spin!' CTA, an entry editor in a sidebar with weight + colour per row, a 'remove winner after spin' raffle-mode toggle, and a last-20-spins history list. Visual: carnival marquee — cream canvas with diagonal stripe backdrop, marquee bulb border around the wheel, Fredoka display type, big red 'Spin!' button with a bottom-shadow press effect, confetti burst on winner reveal. Everything client-side via localStorage.

Create a wheel-of-names tool for classroom random-caller use. Teacher enters student names, hits Spin, the wheel rotates 6-8 turns over ~5s with realistic deceleration, and a winner modal pops with the chosen name. Toggle to remove the winner after each pick so the same student isn't called twice in a row. Persist the class list in browser storage so the next lesson opens with the same roster.

Build a raffle picker for a livestream giveaway. Streamer pastes one entry per line, optionally with a weight column for paid sponsors. Big spin button with sound-effect-friendly visual feedback, full-screen winner reveal with confetti, and a running history of all winners (so the streamer can screenshot the leaderboard at the end of the stream). Shareable URL that encodes the entry list to a hash so the audience can open the same wheel on their own machine.

Build a decision-spinner with five visual variants — classic carnival (cherry + sunshine), Vegas casino (gold on near-black), pastel game-show (mint + coral), glitch arcade (neon cyan + magenta on midnight), and birthday party (rainbow hot pops). Same wheel + bulb border + chunky CTA across all of them; only the colour palette + canvas background swap so the design holds together.

Foire aux questions

How is this different from wheelofnames.com or pickerwheel.com?

Hosted picker sites work but they're ad-supported, log the entries you type, and lock the look behind a sign-in. The version FloopFloop generates is yours — the entry list lives in your browser's localStorage, there's no analytics on the page, and the visual (carnival marquee, vintage casino, neon arcade — pick one) is whatever you ask for. It also ships with weighted slices and raffle-mode (remove-winner-after-spin) out of the box, both of which the free tier of most picker sites paywall.

Is the wheel actually random or does it just look random?

The winner is decided in JavaScript first via Math.random(), then the wheel's final rotation is computed to land that slice under the top pointer. So the spin animation is cosmetic; the result is a fair weighted draw before the wheel starts moving. Weighted entries work — set a weight of 3 on one slice and it gets a 3x bigger slice on the wheel and a 3x higher chance of winning. Spec: the picker uses cumulative-sum over the per-slice weights, so an entry with weight 0 never wins (useful for temporarily disabling a row without deleting it).

Can I share the wheel with someone else?

Out of the box the entries live in your browser's localStorage, so opening the page on a different device starts you with the default entries. Adding a 'copy share URL' button is a one-prompt extension — encode the entry list into a base64 URL hash, the recipient opens the link and their browser hydrates the same wheel. Useful for a teacher posting a 'spin to pick your group' link, or a streamer sharing the raffle wheel so the audience can verify the entries themselves.

Does the raffle mode actually remove the winner from the next spin?

Yes. When 'remove winner after each spin' is on, clicking the 'Remove from wheel' button in the winner modal drops that entry from the live list, the wheel re-renders with one fewer slice, and the next spin runs over the smaller pool. The history list keeps the removed entries so you can still see the full draw order at the end. Turn the toggle off and the wheel behaves like a normal random picker — winners stay on the wheel and can be drawn again.

What's the wheel's animation built on — Canvas? a library?

Plain SVG + a CSS transform transition, no animation library. Each slice is an arc path, the wheel rotates as a single <g> element via a cubic-bezier transition that lasts about 5.8s with realistic deceleration. The browser does the easing in compositor; the JavaScript only sets the final rotation and listens for the transitionend event. That keeps the bundle under ~30kB gzipped (Fredoka + Nunito + the spinner code combined) and works offline once the page is in the browser cache.

Can I use this for a public giveaway or a regulated raffle?

For an informal giveaway — picking a winner among the people who replied to a tweet, choosing a Discord member, deciding who pays for dinner — absolutely. For anything legally regulated (national lotteries, prize promotions with thresholds set by your local consumer-protection law), no client-side picker meets the audit and provable-randomness bar regulators require. For those, the picker FloopFloop generates is fine to *demonstrate* the draw on stream as long as the audit trail itself comes from a regulated provider.

Créateurs associés

Explorer d'autres catégories

Prêt à créer ?

Commencez à créer votre projet dès maintenant — aucune compétence en programmation requise.

Generate this for me

Commencer à créer