Control recordK–INSP–013 · Inspiration
Cursor Savings Calculator
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.
View studyBack to Explore Vercel
K–INSP–023 · Inspiration · Interaction
Vercel
Platforms Dial
A headline whose last words sit on a turning wheel of platform names, driven by a knurled dial you can click, twist, drag or step with the arrow keys — and above 1280px the same list bows into an arc.
- Authorship
- Third-party inspiration
- Techniques
- Registered custom property transition · CSS mod() wrapping · Rotary pointer input · Inertia settle · Web Audio
- Creator
- Vercel
- Observed method
- React / @property-registered distance / CSS mod() and atan2() / container queries / pointer capture / inertia / Web Audio
Kaki reconstruction / Live
Grab the words.
Or turn the knob.
Drag the platform names up or down and flick them to watch them settle. Click the dial to sweep it, drag it with a mouse, twist it with a finger, or focus it and use the arrow keys, Home and End. Switch to Orbit to see the wide-screen arc.
Ship your own AI app builderTurn or click the dial, or use the arrow keys.
Behaviour verified from the supplied archive, stylesheet and component chunk · source headline and names quoted · original code · synthesised clicks · pause control and reduced-motion stop added
Observed system / 03
One number.
Three ways to turn it.
These diagrams separate the shared position, the wide-screen arc, and the dial's sweep.
Why it is here
A rotating headline
that is really a control.
Each row carries one inline custom property: its index minus the current position. That property is registered with @property as a <number>, so the browser can transition it, over 0.9 seconds on cubic-bezier(.22, 1, .36, 1), or a quarter of a second when the visitor caused the step. Everything else is derived from it in CSS: a translate of that many line-heights when stacked, a rotation of that many steps when wide, and the row's opacity while it is being dragged.
Below 1280px the list never ends. The stored position keeps counting up, and CSS folds each distance back with mod(distance + 1, count) - 1, so exactly one row waits above the headline and the rest fall away below it. A row that wraps jumps from the top to the bottom inside the mask, where nobody can see it. Above 1280px the list is bounded, auto-advance stops at the last row, and the dial's click sweeps back.
Because the distance is registered, its computed value is the live, mid-transition one. Grabbing the wheel while it is moving reads that value and starts the drag exactly where the words are, rather than snapping to the row they were heading for. A flick is projected 0.22 seconds ahead to pick the landing row, then closes on it exponentially over a 260ms time constant.
Two quieter details. Below 961px the source drops every name longer than twenty characters so the wheel never clips mid-word, and it also hides the dial, which leaves narrow screens with no keyboard route at all, because the rows themselves are taken out of the tab order. The headline also carries a second prefix, “Build and ship your own”, that its stylesheet hides at every width.
Most rotating headlines are a timer and a fade. This one is a real control: the words sit on a wheel you can grab, the dial beside it clicks through the same positions, and one registered CSS number drives the whole motion, so the list can travel in a straight column or bow along an arc without a second animation.
- Origin
- Vercel for Platforms page, hero headline
- Creator
- Vercel
- Source evidence
- User-supplied Safari web archive of vercel.com/for/platforms, including the rendered hero markup, the CSS module, and the page chunk carrying the wheel, dial and click sounds
- Observed construction
- An invisible sizer of every name sets the slot's width; a wheel group of thirteen absolutely positioned rows, each a button removed from the tab order; and a 96-pixel
role="slider"dial built from a thirteen-dot SVG scale across 144 degrees from -162, a recess, a gradient rim, a gradient face and a rotating indicator - Observed input handling
- Wheel drag of one row per line-height after five pixels, with click suppression after a drag; mouse drag on the dial at twelve pixels a notch; touch and pen turn it around its centre at twelve degrees a notch, ignoring the middle twelve pixels; click, Enter and Space sweep and reverse; arrow keys step, Home and End jump; auto-advance every four seconds paused by hover, focus, a drag, or leaving view
- Observed sound
- Two short recorded clicks, one per direction, decoded into a Web Audio context prepared when idle, unlocked on the first press, and played at 0.216 gain on every whole-row crossing
- Kaki treatment
- Kaki reconstruction of the observed rotating headline and platform dial, quoting the source's headline prefix, thirteen platform names, help text, dial geometry and surface values at the owner's direction. Reproduced: the registered distance transitioned over 0.9s, the mod()-wrapped stacked wheel and its fading mask, the bounded orbit layout with its atan2() step and conic mask, the 4-second auto-advance, wheel drag with inertia, mouse and rotary dial input, sweep-and-reverse clicks, slider keyboard support, and the twenty-character filter below 961px. Kaki synthesises its own click sounds, adds a pause control, stops auto-advance under reduced motion, and keeps the dial on narrow screens. No Vercel logo, audio file, font, screenshot, or bundled source is republished.
- Accessibility addition
- The dial stays available on narrow screens, so the keyboard route never disappears. A pause control stops the rotation, and auto-advance does not run under reduced motion; the source keeps advancing every four seconds and only drops the transition. The homepage preview is non-interactive and removed from the tab order.
- Stated limit
- The source decodes recorded click samples that were not part of the archive; Kaki's clicks are synthesised to the same gain and are not a copy. The layout switch is a lab control: the source chooses stacked or orbit from its container width alone.
- Rights boundary
- No redistribution license identified. Kaki presents an attributed interaction study and reconstruction; quoted source copy is shown for study at the owner's direction.
- Reviewed
- October 16, 2026