Streak Flame Counter
A Duolingo-style streak flame — the flame flares when the number goes up and changes color at milestones
Layered SVG flames flicker continuously; when the day count goes +1 the flame flares up, sparks scatter upward, and the number flips up like a split-flap. On reaching a milestone (7 / 30 / 100 by default) the flame shifts to a new color ramp and a rotating halo appears — a good fit for check-in, learning, fitness, and other streak-tracking scenarios.
npx shadcn@latest add https://webberui.com/r/streak-flame-counter.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<StreakFlameCounter />
Installation
npx shadcn@latest add https://webberui.com/r/streak-flame-counter.jsonOr, once registries are configured in components.json, install it as @webberui/streak-flame-counter.
Usage
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 day</button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | — | The current streak in days; increasing it triggers the flare and the flip |
milestones | number[] | [7, 30, 100] | Milestone thresholds; reaching one shifts the flame's color ramp and brings up the halo |
unit | string | "天" | Unit text after the number (the built-in default is the Chinese word for days) |
caption | string | "連續紀錄" | Caption text below the number (the built-in default is Chinese for "streak") |
size | number | 120 | Flame width (px); the height is derived proportionally |
showProgress | boolean | true | Whether to show a progress bar toward the next milestone |
className | string | — | Forwarded to the outer container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the flame neither flickers nor flares and the number updates directly without flipping
- The day count is read out in full through hidden text with
role="status"andaria-live="polite", while the flipping number is hidden from assistive technology - Purely decorative layers such as the flame, the halo, and the sparks are all marked
aria-hidden - Milestone progress is presented as text ("N days to go"), and the progress bar itself is decorative and
aria-hidden
Live Glance Strip
A live-activity information strip — the iOS Live Activity vocabulary brought to the web as a frosted-glass pill, with status text flipping vertically on update, a progress track advancing live, and details expanding on click.
Mutation List Choreographer
Full CRUD list choreography — insertions open a gap and drop in, deletions collapse the neighbours, reordering moves continuously with FLIP, batches cascade in waves, and removals leave an undo ghost.