Points Earn
A credit chip lifts off the activity that earned it and the balance absorbs it on arrival.
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 } from "react";
import {
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,
} from "motion/react";About this pattern
Points have to come from somewhere, and this motion shows where. The credit chip lifts off the activity row, drifts toward the balance and fades out as it arrives, and the running total only begins counting once the chip is most of the way there. That single scheduling decision is what makes the balance look caused rather than coincidental — start the count on mount instead and the two events read as unrelated. Both halves are text, so both are held to the same rule: the chip translates and fades, the total is driven by a motion value inside a tabular-figure box, and neither ever scales or springs.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Stars credited from an order and absorbed into the balance at the top.