Day Part Picker
Morning, afternoon, evening cards with icons that greet the pick
Create a day-part picker (delivery window cards). Three upright cards side by side, Morning (8–12) with a sunrise icon, Afternoon (12–17) with a sun, Evening (17–21) with a moon, each holding the icon, the label, and the hour range in small monospace, stacked and centered on a hairline card. Selection is one shared ring: an accent border with a soft outer glow (3px accent at 12% alpha) and a faint accent wash, wrapped around the active card and springing between cards on a shared layout animation (stiffness 420, damping 30). As the ring arrives, the card's icon greets the pick: it lifts 2px and scales to 115% with a bouncy spring (stiffness 420, damping 20) while tinting accent; the label turns bold ink. The abandoned card's icon settles back down and fades to muted. Use cards, not a dropdown, when there are exactly a few human-sized options: delivery windows, appointment blocks, restaurant seatings. The icons carry meaning (time of day) rather than decoration, so keep them semantically matched to the ranges. A fourth 'Any time' card can join the row where flexibility is an option. Clicking a card selects it, and the ring moves only then. Nothing cycles the selection on a timer: on a delivery window, the highlighted card is a claim about when someone has promised to be home. Accessibility: the row is a radiogroup; each card role="radio" with aria-checked and a label including the hours ('Morning, 8 to 12'). If prefers-reduced-motion is set, the ring jumps and icons stay put. 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.