Quota Limit Nudge
A usage meter nearing its cap gives one restrained nudge, then reveals the upgrade.
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, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Quota Limit Nudge
*
* A usage meter that fills toward its cap, warms to amber, gives one
* short nudge — and only then offers the upgrade.About this pattern
The tactful version of an upsell. The meter fills to its real value, warms from accent to amber as it crosses the warning threshold, and then the track alone gives a single sideways bump — out fast, back slow, so it reads as one damped nudge rather than an oscillation. Only after that does the upgrade line open underneath on a short height tween with its content riding a spring. The numbers never move, the bump never repeats, and reduced motion drops the bump entirely while keeping the warning and the offer.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
Storage meter warms as it fills and surfaces the upgrade only once it matters.
Related patterns
- Credit Deduct TickA usage balance ticks down to its new figure while the amount taken rises beside it and leaves.
- Processing Steps CheckThree stages clear across a horizontal rail, each hand-off filling the segment to the next marker.
- Delete Confirm MorphA delete control widens in place into a question with a way out, instead of opening a dialog.