Low Stock Indicator
A bar shortens once from the size of the run to what is left, then stops.
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 · Low Stock Indicator
*
* How much is left, said once and calmly. The bar starts at the size of
* the original run and shortens to what remains, the figure rolls intoAbout this pattern
Availability stated as a fact rather than as pressure. The track is the size of the original run and the fill shortens to what remains, so the bar reads as this much of that instead of as something filling up from zero. The figure rolls into place beside it and a restock line explains what happens when the run is gone. Everything is a single eased tween: no springs, no pulsing, no repeat, and above all no clock — a level that keeps moving is a sales tactic, not information, and shoppers stop believing it. Below a quarter remaining the fill takes a warm tint; deliberately not red, because running low is not an error.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
A size that is nearly gone is marked as low beside the size picker, with no timer.
Related patterns
- Sold Out StateThe photo drains of colour and the buy action hands over to a notify control in the same slot.
- Bundle Savings HighlightItems select in turn, a bracket draws down their edge, and the combined saving arrives after it.
- Order Tracking ProgressA shipment walks its stages while the connector fills from stop to stop.