I built Detent, an open-source React wheel picker with spring physics, morphing text, and rolling numbers
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.
[link] [comments]