Inspiration We run lots of quick giveaways, stand-ups, and classroom games. Most “wheel of names” tools feel heavy, pay-walled, or packed with ads. We wanted a one-page, zero-login, no-noise spinner that anyone can fire up in seconds—built entirely on Bolt so others can remix it just as fast. 🛠️🚀
What it does Paste or type a list of names (single or bulk).
The app auto-draws a colorful wheel and shows each player’s win-chance %.
Click PUTAR WHEEL → smooth CSS spin animation + easing physics.
Pointer stops, winner pops, confetti fires (desktop & mobile). 🎉
RESET puts you back to a clean slate—no cookies, no data stored.
How we built it Bolt Builder for the frontend scaffold (React under the hood).
Canvas-based wheel written in vanilla JS for performance.
Tailwind CSS for quick, consistent styling and dark-mode friendliness.
tinycolor2 to auto-generate contrasting slice colors.
Simple PRNG seeded by crypto.getRandomValues() for fairness.
Total dev time: ~14 hrs (design 4 hrs, code 8 hrs, polish 2 hrs).
Challenges we ran into Embedding a high-FPS canvas inside Bolt’s component tree without jank.
Calculating equal slice angles after users edit the list on the fly.
Mobile viewport quirks (100 vh issues on iOS Safari).
Making the win-chance label intuitive for non-tech users.
Accomplishments that we’re proud of 🚀 Live, responsive MVP in under a day.
100% Lighthouse performance score.
First Bolt project to bundle a custom canvas component.
Early testers said, “Finally, a spinner that just works.”
What we learned Bolt’s component API is flexible enough for custom JS widgets.
User delight hides in micro-interactions (ease-out curve, confetti timing).
Accessibility: color contrast + keyboard-only spin support matter.
What’s next for Simpel Spin Wheel Add winner history & CSV export.
Optional sound effects and custom brand colors.
One-click “Embed” snippet for Notion, WordPress, etc.
OAuth-free link sharing with unique wheel IDs.
Open-source the canvas engine so the community can build niche spinners (quiz grades, chores, prayer groups, you name it). đź’ˇ
Built With
- netlify
- react
- vite
Log in or sign up for Devpost to join the conversation.