Element: #306 Count up (motion/text) What it shows: 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. When to use: Stat blocks and metrics sections that scroll into view, totals after a report loads, and any headline number worth a moment of attention. Spec: - `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 `` 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 Motion: - text content (integer counting from 0 to the total): 1400ms 1 - 2 ** (-10 * t) Names: Count up | Number counter | Animated counter | Contagem progressiva | Contador animado | Compteur animé Tags: motion, text, count-up, counter, kpi, number Needs: @codeatlasdev/ui@4.6.0 Components: Button, MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/text#count-up {#snippet children(m)}

Active customers

+18.4% since last quarter

{/snippet}