Product Compare
Adding a product widens a slot while the column's specs ride in from the right.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Product Compare
*
* Adding a product opens a column: the slot widens while the column's
* contents ride in from the right, spec rows a hair apart. The contentsAbout this pattern
The moment a shopper narrows a shortlist. The slot is the only thing that changes size; the column inside is laid out at its final width from the first frame and simply clipped as the slot opens, so no label is squeezed or re-wrapped while it arrives. Width is tweened rather than sprung — a column that overshoots its own width shoves every neighbour and then takes it back — while the contents ride in on a single settle with the spec rows a hair apart. Removing a product collapses the slot in place so the row closes up.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Adding a model to the comparison opens a new column beside the existing ones.
