#306
Count up
A KPI that counts from 0 to 12,480 in 1400ms with an ease-out-expo curve, so the last digits settle slowly. A Count again button replays it on demand.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Count up" pattern (@codeatlasdev/ui demo #306, motion/text) in my app.
Call get_demo({ ids: ["#306"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Stat blocks and metrics sections that scroll into view, totals after a report loads, and any headline number worth a moment of attention.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `label="Count up: a number counts from zero and eases into its total"` and `loop={3200}`
- `const DURATION = 1400` with `1 - 2 ** (-10 * t)` as the easeOutExpo curve
- `n = Math.round(target * ease(t))` on every `requestAnimationFrame`, `toLocaleString('en-US')` formats the digits
- `role="img"` with `aria-label` states the final total once; the counting `<span aria-hidden="true">` is decoration
- The `Button` `onclick` calls `run()`: pressing Count again is the takeover and re-runs the count on demand
- Under reduced motion the attachment sets `n = target` and no frame loop starts
Exact motion (do not approximate):
- text content (integer counting from 0 to the total): 1400ms, 1 - 2 ** (-10 * t)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `label="Count up: a number counts from zero and eases into its total"` and `loop={3200}`
- `const DURATION = 1400` with `1 - 2 ** (-10 * t)` as the easeOutExpo curve
- `n = Math.round(target * ease(t))` on every `requestAnimationFrame`, `toLocaleString('en-US')` formats the digits
- `role="img"` with `aria-label` states the final total once; the counting `<span aria-hidden="true">` is decoration
- The `Button` `onclick` calls `run()`: pressing Count again is the takeover and re-runs the count on demand
- Under reduced motion the attachment sets `n = target` and no frame loop starts
Related
Loading source.