Overview
A selector shaped like a physical dial. The options are real faces on a CSS 3D drum: the radius is solved from the pitch you ask for -- R = row / (2 sin(pitch/2)), the chord identity, because the chord is what the eye actually reads on a cylinder -- so neighbouring options stay exactly one row apart however hard you bend the wheel. Every face rotates on the drum and takes its opacity, blur and colour from its own depth, so the falloff is the geometry rather than a separate fade curve, and faces that turn past the horizon stop drawing instead of ghosting through the front. Motion is a critically damped spring with momentum: a flick spins the drum freely under friction, and when it slows past the floor it picks the option it was heading for and settles onto it with no overshoot. The integrator runs on a fixed 8ms substep, so a 60Hz laptop and a 120Hz phone land identically. Scroll it, drag it, click an option or use the arrow keys, Home and End; a plain click still selects because dragging only takes over after a few pixels. Optional tick on change, a synthesised chirp rather than a downloaded file, so the export needs no audio asset. Anchors left, right or centre, wraps around or stops at the ends, and holds a still pose under prefers-reduced-motion. Options, geometry, physics, depth and colours are all editable, and the export is one self-contained HTML file with no dependencies at all.
Highlights
- Real CSS 3D drum: options are faces on a cylinder, not a faked arc
- Radius solved from pitch by the chord identity, so rows never drift apart
- Critically damped spring with momentum -- flick it and it settles without overshoot
- Fixed-substep integration: identical settle at 60Hz and 120Hz
- Scroll, drag, click and full keyboard control on the same wheel
- Optional tick synthesised in the browser, no audio file to host
- Zero dependencies: the HTML export loads nothing
