Empty to Loaded Count
A stat card sitting at zero rolls up to its real figure once the data resolves.
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 · Empty to Loaded Count
*
* A stat that starts at zero because nothing has loaded yet, and rolls up
* to the real figure when it does. Each digit column moves byAbout this pattern
The moment a dashboard renders its shell before the numbers exist. The card shows a genuine zero and an honest caption rather than a placeholder block, then climbs to the real figure on a decelerating curve so the last few values are slow enough to read. Each digit column moves by translation with a short crossfade and holds one type size throughout — a figure that scales while it counts is a figure you have to re-read. A hidden copy of the final string reserves the width from the first frame, so a count growing from one digit to four never resizes the card or re-centres the type, and only the settled figure is announced to assistive tech.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Analytics view
Headline figures resolve from an empty shell as the query returns.
Related patterns
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.
- Streak AdvanceThe connector reaches today's cell, the cell fills, and the streak count rolls over.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.