Price Change Roll
A recalculated total rolls digit by digit in the direction the money moved.
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 · Price Change Roll
*
* A recalculated total rolls into its new value one digit at a time:
* changed digits travel in the direction the money moved, currencyAbout this pattern
When a total is recalculated the reader needs two things at once: the new figure, and which way it went. This rolls only the digits that actually changed, downward for a saving and upward for a rise, in a short cascade read left to right, while currency symbols and separators stay nailed in place. A delta chip lands a beat later with the size of the change and the reason for it. The type size never changes — a price that grows and shrinks mid-roll is unreadable exactly when someone 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
Fare estimate settles on a new figure as options change, digits moving in place.
Related patterns
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.
- Cart Drawer OpenThe cart panel travels in from the edge and its line items arrive a beat behind it.