Quantity Adjust
The count rolls in the direction it moved and the order total takes a brief tint.
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 · Quantity Adjust
*
* Changing how many of something is in the basket. The count rolls in
* the direction it moved, the line total rolls with it, and the orderAbout this pattern
Changing how many of something is in a basket, with the consequence made visible. The count rolls the way it went — up for more, down for fewer — the line amount rolls with it, and the order total further down the panel picks up a short tint so the number that actually matters is not missed. Figures are text: they translate inside a fixed box and never scale, because a count that pops larger on every tap is the cheapest tell in commerce UI. Nothing springs, since a total that overshoots shows a wrong number, however briefly.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
Adjusting a line quantity updates the summary total in the same beat.
Related patterns
- Stepper IncrementThe number rolls up on increase and down on decrease, so the two buttons never look alike.
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.
- File Drop Zone ActiveThe dashed outline energizes and the target lifts off the page while a file is held over it.