Credit Deduct Tick
A usage balance ticks down to its new figure while the amount taken rises beside it and leaves.
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 · Credit Deduct Tick
*
* A usage balance paying for what just ran. The figure ticks down
* through a few intermediate values so the movement is legible as aAbout this pattern
The receipt for something that just ran on metered usage. The balance passes through a few intermediate figures rather than cutting straight to the answer, because a subtraction you can watch is a subtraction you believe; changed digit columns roll downward, in the direction the balance moved, and the type holds one size the whole way. The amount taken is treated as a passing remark — it rises beside the figure, fades, and is gone — so the balance ends up as the only thing on screen still saying what happened. The remaining-quota bar shortens by exactly the same amount, so the two readings can never tell different stories.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A usage balance updates after a run, with the charge itemised beside it.
Related patterns
- Quota Limit NudgeA usage meter nearing its cap gives one restrained nudge, then reveals the upgrade.
- Success Check RevealA success badge springs into place while the checkmark draws itself along its path.
- Session Expiry CountdownA session-timeout dialog counts down on a draining ring with a clear stay-signed-in action.