K–INSP–005 · Inspiration
Cursor Section Index Dot
A sticky page index whose single accent mark springs diagonally to the end of the current section label.
View studyKaki catalogue
K–INSP–013 · Inspiration · Interaction
A slider whose visible parts are all drawn beside an invisible real input, and a figure whose digit wheel is solved in CSS rather than script.
Kaki reconstruction / Live
Drag, type into the box, or step the slider with arrow keys — all three drive the same input. The workload is an invented Kaki sample; the slider geometry and the digit wheel are the source’s.
*Illustrative sample on invented depths. Not a measurement, a rate, or a quotation.
Behavior verified in the supplied Cursor calculator archive · Kaki-authored workload and copy · still digits on reduced motion
Observed interaction / 03
These diagrams describe the source mechanisms without reproducing its screenshots, model names, rates, icon font, or bundled application code.
Why it is here
A custom slider is usually where accessibility goes to die: someone rebuilds one from pointer events and the keyboard, the screen reader and the form semantics all have to be reconstructed by hand, badly. This one keeps the real element and makes it invisible, so the parts that are hard to get right are simply not reimplemented. The figure does the same trick one layer down — the wheel’s arithmetic is handed to the style engine, and script is left with nothing to say except which numeral is current.
Both mechanisms here refuse the obvious shortcut. The slider keeps a real input and hides it rather than rebuilding one from pointer events, so the keyboard and assistive layers come free. The figure hands the arithmetic of its own motion to the style engine, so script only ever announces which numeral is current.
clamp(0px, calc(value% - handle/2), calc(100% - handle)) with the handle width held in a custom property that widens for coarse pointers; a paired numeric text field with numeric input mode and a digits-only pattern, its wrapper styled on focus-within; a figure rendered by a digit-wheel web component where each column holds all ten numerals and each numeral derives its own offset through CSS mod() and round(down, …), wrapping to the shorter half of the ring and clamping to one cell either side, with idle numerals dropped from layout except while spinning; and two captions stacked in one grid cell, the inactive one hidden and inert, so switching view cannot change the block’s height