Cart Badge Count
The cart badge rolls each changed digit in the direction of the change and settles once.
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 { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Cart Badge Count
*
* The badge rolls to its new number: each digit that actually changed
* travels in the direction of the change and crossfades, the digits thatAbout this pattern
A running total that reads cleanly while it moves. Only the digits that actually changed travel — the rest hold dead still — and they roll upward when the total climbs, downward when it falls, so the direction is legible before the number is. The pill widens on a short eased tween when a second digit arrives. Nothing scales: a number that grows and shrinks mid-change is unreadable, which is precisely the moment a shopper is trying to read it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Cart quantity in the header bar changes as items are added from a listing.
Related patterns
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.
- Price Change RollA recalculated total rolls digit by digit in the direction the money moved.
- Add to Cart FlyThe product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.