# Duration Picker

> A duration pill that pulls apart to be edited - hours and minutes stretch away from each other like goo, then melt back into one when you confirm.

A duration that sits as one quiet pill until you want to change it.

Tap the pen and the pill pulls apart into hours, minutes and a confirm button. The pieces don't just slide away. They stretch, holding onto each other for a moment before they let go, and melt back into one when you confirm.

The shapes sit on their own layer under a blur and a sharp alpha threshold, the old goo trick. Closed, a flat spine runs through them so the pill has straight edges and gives nothing away. Opening, the spine thins out first. Pulled apart, the blur keeps bridging them until the gap is too wide to hold. The numbers sit on a separate layer above, so they stay crisp.

Type to set a value, or use the arrow keys to step it. Anything past the ceiling turns red with a small shake, and it can't be set. Trying to move on or confirm just shakes that field again. Enter moves from hours to minutes and then confirms, and Escape puts back what was there.

## Source

- [components/crafts/duration-picker/index.tsx](https://github.com/aviralj02/portfolio-v2/blob/main/components/crafts/duration-picker/index.tsx)

---

HTML version: https://heyaviral.com/craft/duration-picker · Site overview for agents: https://heyaviral.com/llms.txt