Cart Quantity Stepper
Stepping the quantity rolls the count and both totals in the direction of the change.
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 · Cart Quantity Stepper
*
* Change the quantity and every figure that depends on it rolls in the
* direction of the change: up for more, down for less. The digitsAbout this pattern
A cart line where every figure downstream of the stepper answers it. The outgoing number leaves the way the new one arrives, so the roll itself carries the direction — up for more, down for less — and the cart sum travels a shorter distance than the line total, which reads as a consequence rather than a second announcement competing with the first. Figures sit in fixed-width tabular slots so a 9 becoming a 10 cannot nudge the row sideways, and they translate and crossfade rather than scaling: the one thing a shopper must trust at a glance is the number.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
Adjusting an item's count animates the line and basket figures in the direction of the change.
Related patterns
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.
- Quantity AdjustThe count rolls in the direction it moved and the order total takes a brief tint.
- Stepper IncrementThe number rolls up on increase and down on decrease, so the two buttons never look alike.