Stock Pulse

A stock pulse meter — a falling liquid level shows consumption, crossing a threshold changes color and shakes, and once it enters low stock the whole bar breathes while the remaining count rolls down.

Loading preview…

npx shadcn@latest add https://webberui.com/r/stock-pulse.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Current stockvalue

Total stocktotal

120

Low-stock threshold (ratio)lowStockAt

0.2

Bar height (px)height

200

Animate the liquid surfacewave

Show the readout on the rightshowReadout

<StockPulse />

Installation

npx shadcn@latest add https://webberui.com/r/stock-pulse.json

Or, once registries are configured in components.json, install it as @webberui/stock-pulse.

Usage

import { StockPulse } from "@/components/ui/stock-pulse";

<StockPulse value={38} total={240} unit="pairs" label="Limited-edition sneakers" />

value is a controlled prop — driven by outside data, and the liquid level falls as the number goes down; crossing a band in thresholds changes the liquid's color and shakes it slightly; below lowStockAt the whole bar starts breathing and the remaining count rolls down on a reel.

Custom threshold bands

thresholds describes each stock band's lower-bound ratio and color from high to low, and you can add or remove bands freely:

<StockPulse
  value={stock}
  total={500}
  lowStockAt={0.15}
  thresholds={[
    { from: 0.6, color: "#0ea5e9", label: "Well stocked" },
    { from: 0.3, color: "#f59e0b", label: "Restocking" },
    { from: 0, color: "#ef4444", label: "Only a few left" },
  ]}
/>

Props

Prop	Type	Default	Description
`value`	`number`	—	Current stock level (controlled)
`total`	`number`	—	Total stock (the full-level basis)
`thresholds`	`StockThreshold[]`	Three bands (plenty / low / sold out)	Threshold bands from high to low; crossing one changes the color
`lowStockAt`	`number`	`0.2`	Low stock threshold (as a ratio of the total, 0–1); below it the whole bar breathes
`height`	`number`	`200`	Height of the meter bar (px)
`width`	`number`	`64`	Width of the meter bar (px)
`waveAmplitude`	`number`	`10`	Amplitude of the wave on the liquid surface (px)
`wave`	`boolean`	`true`	Whether to show the surface wave animation
`unit`	`string`	`"units"`	Unit text for the remaining amount
`label`	`string`	`"Stock remaining"`	Title of the readout area
`showReadout`	`boolean`	`true`	Whether to show the readout area on the right

`StockThreshold`

Field	Type	Description
`from`	`number`	Lower bound of this band (as a ratio of the total, 0–1); it applies when the current ratio is ≥ `from`
`color`	`string`	Liquid color; accepts any CSS color string
`label`	`string`	Status label for this band

How it works

Falling level: when value changes, the fill height sinks with a spring transition, imitating liquid sloshing to a rest.
Threshold color change and shake: when the ratio crosses a band boundary in thresholds, the liquid color transitions smoothly and the meter bar triggers a brief shake at the same time.
Low stock breathing: below lowStockAt, the whole meter bar and its outer glow keep breathing, and the readout takes on the current band's color.
Rolling countdown: the remaining count is presented on digit-by-digit reels; when the number changes the ones place rolls first and the higher places follow in order, and when the digit count shrinks the surplus reels fade out and collapse.

Accessibility

The root container is a role="meter" carrying aria-valuenow / aria-valuemin / aria-valuemax and aria-valuetext (for example "Almost sold out, 12 units left").
On entering low stock, a warning is announced once through an aria-live="polite" block; purely visual layers such as the wave, glow, and reels are all aria-hidden.
When the user has "reduce motion" enabled at the system level, the static presentation of the meter bar and readout is kept, while the surface wave, breathing pulse, shake, and reel animations are disabled.

On this page