Product Variant Swatch

Create a product card with variant swatches. A product card: an image area on top (use gradient placeholders per variant) and a bottom row with round color swatches on the left and the price on the right. Selecting a swatch swaps the image with an iris wipe: the new variant's image expands from the center as an animated clip-path circle (from circle(0% at 50% 50%) to circle(75%), 550ms, easing cubic-bezier(0.22, 1, 0.36, 1)) over the old one, which fades out underneath. The product caption on the image updates to the variant name. The selected swatch springs to 118% scale (stiffness 500, damping 22) and gets an accent outline (2px, 1px offset, color transition 250ms); pressing any swatch dips it to 90%. The variant changes only when someone picks a swatch. Never cycle the variants on a timer: on a product card the shown colour is a claim about what the shopper is buying, and it must only ever be the one they chose. Accessibility: swatches are buttons with aria-label ("Select Clay") and aria-pressed for the active one. If prefers-reduced-motion is set, swap images instantly with no wipe and skip the scale springs. 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.