Color Picker Swatches

Create an animated color swatch picker. Two stacked parts. Top: a preview panel whose background crossfades to the selected color (animate background-color over 0.4s with cubic-bezier(.22,1,.36,1)), carrying a small monospace label with the color name and hex that updates with a vertical roll: old value slides up and out, new one rises in (0.25s). Bottom: a row of 5 circular swatches. The selection indicator is one shared ink ring that sits around the active swatch and springs from swatch to swatch when the selection changes (shared layout animation, stiffness 460, damping 28): a single object that travels, never a ring redrawn per swatch. Hovering a swatch inflates it to 115%; pressing squashes to 90%. Clicking selects. Give light swatches a faint ink hairline so they read against the page. The ring moves only when someone picks a swatch. Never step it through the palette on a timer: a picker that changes its own selection is telling the person they chose something they did not. Accessibility: each swatch is a button with an aria-label naming the color and hex, aria-pressed on the active one; the preview label uses aria-live="polite". Never rely on color alone to announce the choice. If prefers-reduced-motion is set, the ring, preview, and label 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.