Stock Pulse

庫存脈動計：以液面下降呈現消耗，跨越門檻換色並震動，進入低庫存後整條呼吸脈動並滾動遞減剩餘件數。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

目前庫存量value

總庫存量total

120

低庫存門檻（比例）lowStockAt

0.2

量條高度（px）height

200

液面波浪動畫wave

顯示右側讀數showReadout

<StockPulse />

安裝

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

或在 components.json 設定 registries 後，改用 @webberui/stock-pulse 安裝。

安裝依賴後，從 registry JSON（/r/stock-pulse.json 的 files[0].content）複製 stock-pulse.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

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

<StockPulse value={38} total={240} unit="件" label="限量球鞋" />

value 為受控屬性——由外部資料驅動，數值下降時液面隨之下降；跨越 thresholds 分段時液體換色並輕微震動；低於 lowStockAt 後整條開始呼吸脈動，剩餘件數以滾輪滾動遞減。

自訂門檻分段

thresholds 由高到低描述每個庫存分段的下界比例與顏色，可任意增減段數：

<StockPulse
  value={stock}
  total={500}
  lowStockAt={0.15}
  thresholds={[
    { from: 0.6, color: "#0ea5e9", label: "供貨穩定" },
    { from: 0.3, color: "#f59e0b", label: "補貨中" },
    { from: 0, color: "#ef4444", label: "剩最後幾件" },
  ]}
/>

Props

Prop	型別	預設值	說明
`value`	`number`	—	目前庫存量（受控）
`total`	`number`	—	總庫存量（滿量基準）
`thresholds`	`StockThreshold[]`	三段（充足／偏低／售罄）	由高到低的分段門檻，跨越時換色
`lowStockAt`	`number`	`0.2`	低庫存門檻（佔總量比例 0–1），低於此值整條呼吸脈動
`height`	`number`	`200`	量條高度（px）
`width`	`number`	`64`	量條寬度（px）
`waveAmplitude`	`number`	`10`	液面波浪起伏幅度（px）
`wave`	`boolean`	`true`	是否顯示液面波浪動畫
`unit`	`string`	`"件"`	剩餘量的單位文字
`label`	`string`	`"剩餘庫存"`	讀數區標題
`showReadout`	`boolean`	`true`	是否顯示右側讀數區

`StockThreshold`

欄位	型別	說明
`from`	`number`	此分段的下界（佔總量比例 0–1），當前比例 ≥ `from` 時採用
`color`	`string`	液體顏色，接受任何 CSS 顏色字串
`label`	`string`	此分段的狀態標籤

細節

液面下降：value 變動時，填充高度以彈簧過渡沉降，模擬液體晃動落定。
門檻換色與震動：當比例跨越 thresholds 的分段界線，液體顏色平滑轉換，量條同時觸發一次短暫震動。
低庫存呼吸：比例低於 lowStockAt 後，整條量條連同外圈光暈持續呼吸脈動，讀數採用當前分段顏色。
滾動遞減：剩餘件數以逐位滾輪呈現，數字變化時個位先滾、高位依序跟上；位數減少時多餘的滾輪淡出收攏。

可及性

根容器為 role="meter"，帶 aria-valuenow / aria-valuemin / aria-valuemax 與 aria-valuetext（例如「即將售罄，剩餘 12 件」）。
進入低庫存時，透過 aria-live="polite" 區塊朗讀一次警告；波浪、光暈、滾輪等純視覺層皆 aria-hidden。
使用者系統開啟「減少動態效果」時，保留量條與讀數的靜態呈現，停用液面波浪、呼吸脈動、震動與滾輪動畫。

On this page