The Itch I Needed to Scratch
Every few weeks, someone in a group chat would ask: "How do we decide?" Movie night. Who pays. Which game to play next. And every time, we'd spend more time arguing about how to decide than actually deciding.
I wanted something dead simple. Paste in some options, spin, done. But every tool I found either required an account, threw ads at you, or had so many settings you needed a tutorial. So I built SpinDecide — a free, no-login random wheel spinner that just works.
This post is about why "just works" is deceptively hard to build.
The Stack
I kept it deliberately lean:
- Vanilla HTML, CSS, and JavaScript — no framework overhead
- Canvas API for rendering and animating the wheel
- CSS transitions for UI polish
- Deployed as a static site — fast, cheap, no server costs
No React. No build pipeline. No dependencies to maintain. The goal was that anyone could open the source and understand it in under ten minutes.
The Technical Challenges (Yes, Even a Spinner Has Them)
1. Making the Spin Feel Real
A wheel that stops abruptly feels broken. A wheel that always decelerates the same way feels fake. Getting the easing curve right took more iteration than I expected.
I ended up using a custom cubic-bezier-style deceleration applied to the rotation delta per frame. The key insight: the perception of randomness matters as much as actual randomness. If the wheel always stops in roughly the same quadrant, users notice — even if the math is correct. I added a random offset to the final resting position so it never felt predictable.
2. Label Rendering on Canvas
Canvas text doesn't wrap. If someone adds a long option like "Hawaiian pizza (controversial but valid)", you either truncate it, shrink the font, or let it overflow the segment.
I implemented dynamic font sizing: measure the text width, compare it to the segment arc length at a given radius, and scale down if needed. It's not perfect for extreme edge cases, but it handles 95% of real-world inputs gracefully without any user intervention.
3. Segment Color Distribution
With fewer than 6 options, a fixed color palette works fine. With 20 options, you need to auto-generate colors that are visually distinct and don't accidentally repeat next to each other.
I went with HSL color generation — evenly distributed hue values with slight saturation/lightness variation. Adjacent segments get hues far apart on the wheel. Simple, and it looks good across all segment counts.
4. State Management Without a Framework
With no framework, managing app state — the list of options, spin history, current result — means discipline. I used a single appState object and explicit update functions. Boring, but it made debugging easy and the code readable six months later.
Lessons Learned
Simplicity is a product decision, not just a technical one. Every feature I considered adding (weighted options, saved wheels, user accounts) would have made the tool slightly more powerful and significantly more complicated. I cut most of them. The constraint made the product better.
Canvas is powerful but verbose. For a project like this it's the right call — no library weight, full control. But I wrote a lot of boilerplate I'd abstract into helpers on the next project.
Small tools still need good UX copy. The button says "Spin!" not "Submit" or "Randomize." The result shows up big and bold. These tiny decisions took real thought.
Deployment friction kills momentum. Static hosting meant I could push changes and see them live in seconds. That speed kept me motivated to iterate.
Try It
If you've got a group that can't decide on anything, or you're a teacher who needs a random name picker, or you're settling a debate the civilized way — give it a spin:
No account. No ads in your face. Just add your options and spin.
Wrapping Up
Building something simple taught me more about product thinking than any complex project has. When you strip away the features, what's left has to actually work — and work well. The wheel spins, a winner appears, someone loses the argument about pineapple on pizza.
That's the whole product. And getting that right took real effort.
If you're building small tools, I'd love to hear what you're working on in the comments.
Top comments (0)