Relative Date Chips
Today / Tomorrow / In 3 days chips resolving to a live date preview
Create relative date chips (natural-language quick picks). A row of pill chips: 'Today', 'Tomorrow', 'In 3 days', 'Next Mon', with one shared accent chip background that springs between selections (shared layout element, stiffness 430, damping 30); the active label flips to paper-white and bold while the others rest muted on hairline pills. Below, a preview card resolves the choice into a concrete date, updating with two synchronized motions: the formatted date ('Fri, Aug 29') rolls vertically in a fixed-width monospace window (reserve the width up front so the card never breathes), and next to it a small accent badge pops in fresh for every selection: 'now' for today, '+1d', '+3d', '+5d', with a spring from 50% scale (stiffness 480, damping 22). The badge is the teaching detail: it shows what the relative phrase actually did. Compute the resolved dates from a real 'today' at runtime; keep chips for the choices your product actually needs (shipping estimates, reminders, snooze menus), and pair the row with a 'Pick a date…' chip opening a full calendar for everything else. The chip changes only when someone picks one. Never cycle it on a timer: the preview card is stating a real date back to the reader, and it must only ever be the one they asked for. Accessibility: the row is a radiogroup (role="radio", aria-checked); the resolved date is aria-live="polite" so choosing 'Tomorrow' announces the real date. If prefers-reduced-motion is set, the chip and preview swap 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.