Interaction

Click the pencil to open and focus hours; edit hours and minutes, then click the check or press Enter to confirm. Escape restores the last confirmed value and closes. Tab moves between fields.

States

Initial content 7 h / 25 min; ranges 0–24 hours and 0–60 minutes. Initially closed. Segments merge into a pill when closed and separate by 8px when open. Height 48px; radius setting 12px, capped at half the height.

Timing

Response basis 450 ms, analytical damped spring with bounce 0.12. Duration controls pacing rather than an exact settling time. Gap, inner corners, input widths, gentle sway and pencil-to-check morph move together.

Enter and exit

Negative, fractional or over-limit input is immediately truncated and clamped, with a brief shake. Empty fields stay editable and confirm as zero. Editing is enabled. Theme light.

Repeated input and interruption

Rapid clicks preserve spring position and velocity. Pause, background tabs and inactive previews freeze all clocks. Resume continues. Changes to gap, bounce or duration demonstrate one cycle. Inspector content updates immediately and is saved; direct preview input, confirmations, focus, progress and observation speed are transient and excluded from JSON.

Reduced motion

State changes settle instantly; bounce, sway, correction shake and automatic demo closing are disabled. Input, confirmation, cancellation and limits remain functional.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "duration-picker",
  "durationMs": 450,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "durationPicker": {
    "hours": 7,
    "minutes": 25,
    "maxHours": 24,
    "maxMinutes": 60,
    "hoursLabel": "h",
    "minutesLabel": "min",
    "gap": 8,
    "bounce": 0.12,
    "height": 48,
    "radius": 12,
    "theme": "light",
    "defaultEditing": false,
    "disabled": false
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.