Duration Picker

Create a duration picker (arc stepper). A circular dial flanked by round − and + hairline buttons. The dial: a track ring in ink at 9% alpha with three tiny muted dots at the quarter marks, and over it an accent arc showing the chosen duration as a fraction of the maximum (e.g. 45m of 2h): strokeDasharray = circumference, strokeDashoffset = circumference × (1 - fraction), rotated -90deg to start at 12 o'clock, 6px stroke with rounded caps. Stepping ±15 minutes does two things at once: the arc SWEEPS to its new length (stroke-dashoffset transitioning 0.4s with cubic-bezier(.22,1,.36,1): a visible sweep, not a jump) and the centered label rolls vertically to the new value with a spring (old value up and out, new one rising in, stiffness 440, damping 30). Format durations humanely - '45m', '1h 15m' - in bold tabular-nums monospace; pressed buttons squash to 88%. Clamp to the range (15m minimum, the dial's maximum at the top end); at a boundary the arc refuses with the button's press feedback still playing. Holding a button may auto-repeat. Use it wherever users size a block of time - meeting lengths, timers, focus sessions - the arc gives 'how much of the hour' at a glance while the number stays exact. Accessibility: the control is a spinbutton (aria-valuenow in minutes, aria-valuetext '45 minutes'); buttons carry 'Less time' / 'More time' labels; the label is aria-live="polite". If prefers-reduced-motion is set, arc and label update instantly. 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.