#194
Animated counter
A ring gauge that counts up from 0 to 94 on mount, with a text label that changes with the value.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Animated counter" pattern (@codeatlasdev/ui demo #194, charts/gauge) in my app.
Call get_demo({ ids: ["#194"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Animating a score or health metric on load and pairing it with a verdict label.
Keep these library parts, with the props and tokens the demo uses:
- Card, Stack from "@codeatlasdev/ui"
- GaugeChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `let value = $state(0)` incremented in `onMount` by `Math.min(value + 2, 94)` every 40 ms via `setInterval`
- `<GaugeChart {value} variant="ring"` with `height="260px"`
- `formatter={(v) => String(Math.round(v))}` rounds the displayed number
- `const label = $derived(value < 40 ? 'Needs work' : value <= 70 ? 'Good' : 'Excellent')`
- `<Stack gap="3">` stacks the gauge above `<p class="label">{label}</p>`
- Interval is cleared when `value >= 94` and on unmount
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - Stack
@codeatlasdev/ui - GaugeChart
@codeatlasdev/ui/charts
How it is built
- `let value = $state(0)` incremented in `onMount` by `Math.min(value + 2, 94)` every 40 ms via `setInterval`
- `<GaugeChart {value} variant="ring"` with `height="260px"`
- `formatter={(v) => String(Math.round(v))}` rounds the displayed number
- `const label = $derived(value < 40 ? 'Needs work' : value <= 70 ? 'Good' : 'Excellent')`
- `<Stack gap="3">` stacks the gauge above `<p class="label">{label}</p>`
- Interval is cleared when `value >= 94` and on unmount
Related
Loading source.