連續紀錄火焰
Duolingo 式連續天數火焰：數字增加時火焰爆閃、里程碑變色
多層 SVG 火焰持續搖曳，天數 +1 時火焰爆大一下、火花向上散射、數字向上翻牌；達成里程碑（預設 7 / 30 / 100）時火焰換色階並出現旋轉光環，適合打卡、學習、健身等連續紀錄場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
120
<StreakFlameCounter />
安裝
npx shadcn@latest add https://webberui.com/r/streak-flame-counter.json或在 components.json 設定 registries 後，改用 @webberui/streak-flame-counter 安裝。
安裝依賴後，從 registry JSON（/r/streak-flame-counter.json 的 files[0].content）複製 streak-flame-counter.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { StreakFlameCounter } from "@/components/ui/streak-flame-counter";
const [count, setCount] = useState(5);
<StreakFlameCounter count={count} milestones={[7, 30, 100]} />
<button onClick={() => setCount((c) => c + 1)}>+1 天</button>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
count | number | — | 目前連續天數，增加時觸發爆閃與翻牌 |
milestones | number[] | [7, 30, 100] | 里程碑門檻，達標時火焰換色階並出現光環 |
unit | string | "天" | 數字後的單位文字 |
caption | string | "連續紀錄" | 數字下方的說明文字 |
size | number | 120 | 火焰寬度（px），高度依比例自動計算 |
showProgress | boolean | true | 是否顯示距離下一個里程碑的進度條 |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，火焰不搖曳、不爆閃，數字直接更新不翻牌
- 天數以
role="status"加aria-live="polite"的隱藏文字完整朗讀，翻牌數字對輔助科技隱藏 - 火焰、光環、火花等純裝飾層皆標記
aria-hidden - 里程碑進度以文字呈現（還差 N 天），進度條本身為裝飾性
aria-hidden