Filter Chip Animated
Filter pills that flip dark when picked and grow a tiny x
Create animated filter chips. A wrapping row of pill-shaped filter chips. Toggling one on: its background and border animate to the ink color (220ms) with the text flipping to paper, and a tiny x icon grows into the chip from zero width with a spring (stiffness 500, damping 30), nudging the label aside via animated layout rather than jumping. Toggling off reverses, the x collapsing away. Pressing a chip dips it to 92%. Below the row, a status line: with active filters it shows a "Clear N filters" link in the accent color (fading up 6px when it appears); with none, a muted monospace "no filters". Clearing pops all chips back to their off state at once. Accessibility: chips are buttons with aria-pressed; the status line uses aria-live="polite". If prefers-reduced-motion is set, toggle chips instantly without the x growth or layout nudge. 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.