Variant Swatch Switch
Choosing a colorway crossfades the product while one selection ring travels to the swatch.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Variant Swatch Switch
*
* Picking a colorway crossfades the product to its new finish while the
* selection ring travels to the swatch you chose — one ring that moves,About this pattern
Two things have to agree the instant a finish is chosen: the picture and the marker. The product crossfades to the new colorway with a short directional slide so the swap has a heading, and a single selection ring travels along the swatch row on a shared layout animation rather than one ring fading out while another fades in. The finish name shares a grid cell with itself across the swap, so renaming the colorway can never nudge the price beside it. Colorways are literal — they are the product's actual finishes, not surfaces of the page.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Colorway thumbnails swap the main product shot while the chosen one stays marked.
Related patterns
- Gift Card ApplyA single sheen crosses the card while the balance eases down and the amount due settles to zero.
- Upsell Slide InA complementary item opens the layout beneath the cart instead of covering it.
- Add to Cart FlyThe product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.