All studies50 / 74
Interaction
Engagement dial
A ring of ticks you turn by angle; the lit band springs past the new reading and settles, and the readout names the engagement and its price.
Where it earns its place
A single headline number that deserves a tactile control: engagement length, seats, storage, a budget or a target on a pricing page.
What we changed
- Recast from a humidity gauge into an engagement dial: 2 to 12 weeks, with the typical 4 to 8 week band marked on an outer arc and the tier and price read out in the centre.
- Kept the hand-rolled spring that overshoots and settles, the brighter head of the band, and the fade in brightness behind it that carries the fine reading.
- The travelling wave now lives only while the value moves or is held, then decays and the animation loop stops, so at rest the gauge is still and costs nothing.
- Fixed a wrap: dragging across the bottom gap used to jump from maximum to minimum; a mid-drag jump of more than half the scale is now ignored.
- Ticks are painted by attribute instead of re-rendering 60 elements per frame; Page keys, Home and End join the arrows, and reduced motion shows the reading instantly.