Batch Action Count
Ticking rows rolls a count in a floating bar that rises on the first selection.
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,
type Variants,
} from "motion/react";
About this pattern
Bulk selection told through one number. The first tick raises the action bar from below the fold on a flat spring; every tick after that rolls the count through a clipped slot — upward when you add, downward when you take one away, so the direction of the change is visible without reading the digit. Clearing the selection drops the bar the way it came, faster than it arrived. The type size never changes and the slot is sized in character units, so double digits do not shove the actions sideways.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
Selecting messages swaps the header for a bulk action row with a live count.
Related patterns
- Credit Deduct TickA usage balance ticks down to its new figure while the amount taken rises beside it and leaves.
- Banner DismissAn announcement strip fades its message, then collapses its own height so the page closes the gap.
- Error Retry NudgeA failed action answers with one short damped nudge and becomes its own retry.