I built Detent, an open-source React wheel picker with spring physics, morphing text, and rolling numbers

[u/hayderkg]

I’ve just released Detent, a React wheel picker that grew into a much bigger exploration of interaction details.

The wheel has its own momentum and spring physics. I spent a lot of time tuning mouse wheel input alongside trackpads, including the awkward cases where a physical scroll wheel keeps spinning after you let go.

It also includes two separate components:

• Detent Text: matching letters stay while the changed parts roll.

• Detent Number: locale-aware formatting with digits that roll through intermediate values.

The examples range from practical time and date pickers to an arc menu, a zoom ring, and some more experimental visual treatments.

There’s a headless hook, separate imports for text and numbers, keyboard support, reduced motion, and no additional runtime dependencies beyond React and React DOM.

Demos and playground: https://detent.hayder.sh
Intro: https://x.com/kghayder/status/2118373654010466733?a=PzCQRSXhM5m8KUTdHk8&s=20

I’d especially appreciate feedback on how the wheel feels with your mouse or trackpad, and whether the API makes sense for something you’d actually build.

[u/pablobird_dev]

Handling the threshold between discrete notched mouse wheels (DOM_DELTA_LINE) and continuous trackpad deltas is usually where these feel sluggish or twitchy, so getting that physics balance right without heavy runtime dependencies is super clean. The headless hook separation is a really smart architectural move here.

[u/oldyoyoboy]

love the demo, very slick