KQ-1234 · CROWN/WATCH

Crown Watch

A watch frame whose crown scrolls its screen: drag or wheel over the crown and its knurl turns 1:1 under the finger, a cylinder seen edge-on whose ridges crowd toward its top and bottom, geared so one notch is one step of content, and a swipe on the glass turns the crown with it. With detents the crown sticks at each notch and jumps through the middle while the content steps on springs.snap with a tick; without them the content follows the crown 1:1 and a flick coasts to its projected landing on springs.glide with the release velocity, and either way the ends rubber-band and spring back on snap. The crown is a vertical slider whose arrow keys turn it a notch, Page keys a screen and Home and End to the ends, and Enter or Space press it, which pushes it in on springs.flick and glides the screen home as the crown unwinds; the whole watch leans toward the pointer under a glare on its crystal.

KQ-1234 · CROWN/WATCH

09:52Harbour · P4
09:58Northgate · P2
10:04+3 minColdbrook · P1
10:11Fernworks Halt · P3
10:17Harbour · P4
10:23Basin Quay · P2
10:30+6 minNorthgate · P2
10:36Waylight Junction · P5
10:44Coldbrook · P1

next train on top · turn the crown

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/crown-watch

Props

children: React.ReactNode; default —; The screen's content, in real px, scrolled by the crown. It wears the dark theme: a watch screen is black glass.
label: string; default "Watch"; The watch's accessible name; the screen region is named after it.
title: string; default —; The app's name, shown at the top left of the screen's header.
time: string; default "10:09"; The clock at the top right of the screen's header.
value / defaultValue: number; default 0; The scroll offset in px from the top of the content (controlled / initial). Clamped to the content's measured range.
onValueChange: (value: number) => void; default —; Fires from the turn, swipe, wheel, key or press that scrolled it, with the new offset in whole px: each notch as it lands with detents, the landing of a coast without.
step: number; default 32; Content per notch of the crown, in px (8 or more). Make it your row height so every notch lands on a row.
detents: boolean; default true; The crown ratchets, a notch, a step and a tick at a time. Off, it turns smoothly, the content follows 1:1 and a flick coasts.
case: "steel" | "gold" | "black"; default "steel"; The case and crown metal (and a mesh band's), fixed pigments that read the same in either theme.
band: "sport" | "leather" | "mesh"; default "sport"; The strap: a moulded sport band with holes, stitched leather, or a fine metal mesh.
onCrownPress: () => void; default —; The crown was pressed (tap, Enter or Space). The press also takes the screen back to the top.
sound: boolean; default false; Play the crown's detents: a tick per notch it turns through (with detents on) and a low knock at an end stop, only ever in answer to the visitor.
disabled: boolean; default false; The crown and glass stop answering and the screen's content is inert.
className: string; default —; Classes for the root, which keeps a 25:27 aspect ratio and sizes everything from its width.

Prop	Type	Default	Description
children	React.ReactNode	—	The screen's content, in real px, scrolled by the crown. It wears the dark theme: a watch screen is black glass.
label	string	"Watch"	The watch's accessible name; the screen region is named after it.
title	string	—	The app's name, shown at the top left of the screen's header.
time	string	"10:09"	The clock at the top right of the screen's header.
value / defaultValue	number	0	The scroll offset in px from the top of the content (controlled / initial). Clamped to the content's measured range.
onValueChange	(value: number) => void	—	Fires from the turn, swipe, wheel, key or press that scrolled it, with the new offset in whole px: each notch as it lands with detents, the landing of a coast without.
step	number	32	Content per notch of the crown, in px (8 or more). Make it your row height so every notch lands on a row.
detents	boolean	true	The crown ratchets, a notch, a step and a tick at a time. Off, it turns smoothly, the content follows 1:1 and a flick coasts.
case	"steel" \| "gold" \| "black"	"steel"	The case and crown metal (and a mesh band's), fixed pigments that read the same in either theme.
band	"sport" \| "leather" \| "mesh"	"sport"	The strap: a moulded sport band with holes, stitched leather, or a fine metal mesh.
onCrownPress	() => void	—	The crown was pressed (tap, Enter or Space). The press also takes the screen back to the top.
sound	boolean	false	Play the crown's detents: a tick per notch it turns through (with detents on) and a low knock at an end stop, only ever in answer to the visitor.
disabled	boolean	false	The crown and glass stop answering and the screen's content is inert.
className	string	—	Classes for the root, which keeps a 25:27 aspect ratio and sizes everything from its width.