Expanding Search

Create an expanding search input. At rest: a circular icon button (search glyph, hairline border). Clicking it springs the container open to a full input width: animate the width from the circle's diameter to ~230px with a spring (stiffness 380, damping 30), keeping the search icon anchored at the leading edge and clipping the interior with overflow: hidden so nothing pokes out mid-animation. The border darkens to ink while open (0.25s). Once open: the placeholder ('Search components…') fades in after 0.15s, and a round clear button (× in a soft ink-tinted circle) pops in at the trailing edge with a spring from 50% scale. Clicking the clear button (or the icon again) empties the field and collapses the input back to the circle with the same spring. Focus the input as soon as it opens, and collapse on blur when empty. The field fills when a person types and stays empty until then. Do not script a query typing itself. Accessibility: the trigger uses aria-expanded and a swap between 'Open search' / 'Close search' labels; the input keeps a real label or aria-label. If prefers-reduced-motion is set, snap open and closed with no spring. 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.