Product Drop Countdown
限時發售看板，內建倒數翻牌、開賣 CTA 解鎖與售罄補貨表單的三態狀態機。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
200
<ProductDropCountdown />
安裝
npx shadcn@latest add https://webberui.com/r/product-drop-countdown.json或在 components.json 設定 registries 後，改用 @webberui/product-drop-countdown 安裝。
安裝依賴後，從 registry JSON（/r/product-drop-countdown.json 的 files[0].content）複製 product-drop-countdown.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { ProductDropCountdown } from "@/components/ui/product-drop-countdown";
<ProductDropCountdown
title="Aero Runner 3"
subtitle="限量聯名配色"
price="NT$4,280"
dropAt={Date.now() + 1000 * 60 * 60}
totalStock={180}
onPurchase={() => console.log("加入購物車")}
onNotify={(email) => console.log("補貨通知", email)}
/>三態由 dropAt 與庫存自動推導：倒數歸零進入開賣態，庫存售完進入售罄態。若要由外部狀態機接管，傳入受控的 state：
<ProductDropCountdown title="Aero Runner 3" dropAt={dropAt} state="soldout" />庫存也可受控，直接以 sold 驅動消耗條；未提供時開賣後會自動模擬消耗：
<ProductDropCountdown title="Aero Runner 3" dropAt={dropAt} totalStock={200} sold={soldSoFar} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 商品名稱 |
subtitle | string | — | 副標／型號等次要說明 |
price | string | — | 價格顯示字串 |
dropAt | Date | number | — | 發售時間，倒數歸零後自動開賣 |
totalStock | number | 200 | 總庫存單位數，驅動消耗條與售罄判定 |
sold | number | — | 受控已售出數；未提供時開賣後自動模擬消耗 |
state | "countdown" | "live" | "soldout" | — | 受控三態，提供時忽略自動推導 |
ctaLabel | string | "立即購買" | 購買 CTA 文案 |
onDrop | () => void | — | 進入開賣態時觸發一次 |
onSoldOut | () => void | — | 售罄時觸發一次 |
onPurchase | () => void | — | 點擊購買 CTA 時觸發 |
onNotify | (email: string) => void | — | 提交補貨通知表單時觸發 |
細節
- 翻牌時鐘：每一位數字為獨立翻牌卡，值改變時前葉繞下緣往下翻落、後葉繞上緣翻回，以 CSS 3D
rotateX實作，逐格更新。 - 開賣解鎖：倒數歸零瞬間，鎖定的 CTA 以彈性 spring 放大彈入（
stiffness: 440, damping: 12），同時啟動庫存消耗條，剩餘比例低於 50%／20% 時依序轉為琥珀與紅色。 - 售罄降飽和：庫存歸零後整區以
grayscale濾鏡降飽和並降低透明度，補貨通知表單自下方滑入，表單本身維持全彩以保持可讀可用。
可及性
- 倒數區帶
role="timer"與可朗讀的aria-label（例如「距離發售還有 1 小時 0 分 12 秒」），翻牌數字對輔助科技隱藏（aria-hidden）。 - 庫存剩餘量以
aria-live="polite"播報，開賣態的變化能被螢幕閱讀器接收。 - 補貨表單的輸入框帶
label與aria-label，可用 Enter 提交；CTA 與提交按鈕皆有focus-visible外框。 - 使用者系統開啟「減少動態效果」時，翻牌直接切換、CTA 與表單改為淡入、降飽和瞬間完成，不影響三態邏輯。