Wheel Lab

Build the wheel as a dedicated child page instead of mixing it into the dice and coin scenes.

The right way to do the wheel is to separate result selection from the visual spin. First decide the winning segment, then animate the wheel to that exact resting angle with pointer feedback and believable spin-down.

Recommended implementation

For this project, the practical path is SVG or canvas for the wheel face, then drive the spin with a deterministic angle target. Do not let the animation decide the result. Let the result decide the animation.

Decide the winner first

Pick the result in code, map it to a segment center angle, then rotate the wheel to land there. This keeps the tool testable and supports weighted segments later.

Use a fixed pointer

Keep the pointer static and spin only the wheel body. The feedback feels cleaner, and the final segment is easier to read on both desktop and mobile.

Stage the motion in layers

Use a fast initial spin, then drag, subtle wobble, and a short pointer tick near the end. That gives a more believable result without needing full rigid-body physics.