Examples
Each example is its source file, shown exactly as it runs. Under each demo: the Detent pieces it uses, and anything else it needs (a package, images). A few sit in a small scene, to show them in context; the source is the wheel itself.
Pickers
Choosing a value: time, date, time zones, type, words, weight, assets, colors, actions, images.
iOS time picker
Hours, minutes and AM/PM on three looping wheels that share one band.
Detent, DetentText, DetentNumber
View source
Date picker
Day, month and year, linked; days that don't exist that month are skipped.
Detent, DetentText, DetentNumber
View source
Time zones
Scrub Madrid's day and every city follows: clocks roll, days flip at midnight, and each city sits under its real sky, sun and moon where they stand on that date, over its own skyline.
Detent, DetentText
View source
Split the bill
Tip and people on two wheels; each share, the tip and the total roll by decimal place as you turn them.
Detent, DetentNumber
View source
Variable font
A wheel per axis of a variable font. The text morphs between steps as you turn, and each wheel is set in its own values.
Detent, DetentText, DetentNumber · @fontsource-variable/recursive
View source
Word wheel
A word that turns inside a sentence, with an indicator that hugs each word.
Detent
View source
Dynamic sentence
The homepage sentence: a wheel, matching-letter text and rolling numbers, composed in one line.
Detent, DetentText, DetentNumber
View source
Weight dial
Pick a weight on a dial: a half-ring of ticks turns under a fixed needle. Headless, drawn in SVG.
useDetent, DetentNumber
View source
Token list
Rich rows: logos, prices, sparklines, and the day's change in green or red.
Detent, DetentNumber · 2 files · cryptocurrency-icons · public/tokens
View source
Color wheel
A wheel that tints the surface behind it, frame by frame.
Detent
View source
Action wheel
Rows with real switches and buttons; only the centered row takes input.
Detent, DetentText
View source
Image wheel
Stamps on a drum, sideways or upright; the ones off center fade to monochrome.
Detent · public/stamps
View source
Beyond pickers
The same mechanism, used for browsing, playing and displaying.
Carousel
Flat cards or cover flow, endless, and mirrored for right-to-left languages.
Detent · public/ink
View source
Stories
A vertical pager: one story in view, auto-advancing; swipe to browse.
Detent, DetentNumber · 2 files · public/photos
View source
Password lock
A combination lock that reads your password: each rule turns a drum, which lands on a check once the rule is met. With a show/hide eye that keeps your caret.
Detent, DetentText
View source
FM radio
A tuning dial in 0.1 MHz steps. Static between stations, music fading in as the needle nears one: the sound follows the dial frame by frame.
Detent, DetentText, DetentNumber · 2 files
View source
Zoom ring
A lens ring: the photo zooms as you turn it, with a click per step.
Detent, DetentNumber · 2 files · public/photos
View source
Reaction strip
A horizontal strip with a big magnifier on the chosen emoji.
Detent
View source
Detent Number
Prices, counters and percentages that roll by decimal place. Digits stay aligned as signs, separators and columns come and go. Formatted with Intl.NumberFormat.
DetentNumber · 2 files
View source
Detent Text
Animate changing labels with a wheel-like roll. Keep matching letters in place, or roll the whole phrase. Native text at rest, interruptible in motion.
DetentText · 2 files
View source
Departures board
A split-flap board built from DetentText: only the letters that change turn, each in its own tile, row by row.
DetentText · 2 files
View source
Odometer
One wheel per digit, turning to a live number; input is off.
Detent · 2 files · public/tokens
View source
Slot machine
Reels spun from code, each landing on an exact symbol with the wheel's own spring.
useDetent, DetentText
View source
Techniques
Your own markup, and lists that keep growing.
Headless
useDetent with your own markup and CSS. Focus it and try the keyboard.
useDetent
View source
Load more
Pages in more rows near the end; only the visible ones are rendered.
Detent · public/{avatars,avatar.jpg}
View source
Custom interactions with the headless hook
Every frame, the hook reports where the wheel is and how fast it moves, through subscribe. These effects are example implementations built on that for this site, not part of the package: each spans a few files.
Liquid
A WebGL shader: cards stretch toward the edges, smear with speed and split into color at the outline.
useDetent · 4 files · public/{photos,ink}
View source
Dust
Words made of particles. Swipe sideways: each one comes apart and flies into the next, and a fast throw scatters them wider.
useDetent · 3 files
View source
Riso
Photos printed in two inks as a halftone. Turn it: each print dissolves into the next, dot by dot, and speed pulls the plates out of register.
useDetent · 3 files · public/photos
View source
Under the hood
A throw coasts with exponential decay, lands on the row its projection points to, and settles on a spring. Throw it and watch x(t), v(t) and the live numbers; tune the physics, copy the config, and compare mouse wheel handling.