Animated Stats
進入視口時數字從 0 計數到目標值的統計數字組，項目 stagger 淡入上移。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
24000
1.6
0.15
0
<AnimatedStats />
安裝
npx shadcn@latest add https://webberui.com/r/animated-stats.json或在 components.json 設定 registries 後，改用 @webberui/animated-stats 安裝。
安裝依賴後，複製 animated-stats.tsx 到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { AnimatedStats, StatItem } from "@/components/ui/animated-stats";
<AnimatedStats>
<StatItem value={120} suffix="+" label="元件" />
<StatItem value={98} suffix="%" label="滿意度" />
<StatItem value={3.2} suffix="s" decimals={1} label="平均安裝時間" />
</AnimatedStats>Props
AnimatedStats
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 統計項目（放入 StatItem） |
delay | number | 0 | 進場前延遲（秒） |
stagger | number | 0.15 | 每個項目的 stagger 間隔（秒） |
once | boolean | true | 只在第一次進入視口時播放 |
StatItem
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 目標數值，從 0 計數到此值 |
label | string | — | 數字下方的說明文字 |
prefix | string | "" | 數字前綴（例如 $） |
suffix | string | "" | 數字後綴（例如 +、%） |
decimals | number | 0 | 小數位數 |
duration | number | 1.6 | 計數動畫時長（秒） |
可及性
- 使用者系統開啟「減少動態效果」時，跳過計數與 stagger，直接顯示最終數字
- 數字容器帶
aria-label（最終格式化值，含前後綴），計數中的動畫 span 對輔助科技隱藏（aria-hidden），螢幕閱讀器只會朗讀最終值