Clock Time Picker

Create an analog clock time picker. A circular dial (hairline border) with the 12 hour markers placed by trigonometry, each at (center + cos/sin(hour × 30deg - 90deg) × radius), in small monospace. Above the dial, a rolling accent time chip ('09:30') that updates with a vertical roll. The hand: a thin accent line from the center to the hour ring, rotating with transform-origin at its base. Animate its rotation with a soft spring (stiffness 200, damping 20), low enough stiffness that big jumps swing with real momentum. Critical detail: accumulate rotation along the shortest path: keep a running rotation value in a ref and add the signed delta ((target - current % 360 + 540) % 360 - 180) instead of animating to the raw angle, so going from 11 o'clock to 1 o'clock swings 60deg across the top rather than unwinding 300deg backwards. The selected hour's marker fills accent with paper-white text (0.25s transition) as the hand arrives; a small accent pin dot sits at the center. Clicking a marker sets the hour, and a second mode picks minutes on the same dial. Nothing moves the hand on its own: it swings when someone picks, which is the only moment the momentum means anything. Accessibility: the control carries an aria-label with the current time, the chip is aria-live="polite", and markers are buttons. If prefers-reduced-motion is set, the hand jumps instantly with no spring. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.