CountUp

CountUp renders a number that counts up to its final value the first time it scrolls into view. The final value is the element's real text, so with JavaScript off, under prefers-reduced-motion: reduce, or for a value with no number it renders as a plain static number — the sweep is a pure enhancement, never a gate. Duration and easing are token-backed (--duration-xl / --ease-out), and tabular-nums holds the width steady so the surrounding layout does not jitter as the digits change.

It has one visual appearance — the only input is the value it counts to, and it parses the number out of whatever string it wraps (4,800+, 98%, $2M), re-appending the prefix, suffix, and thousands grouping while counting.

<CountUp>4,800+</CountUp>

<Counter value={12} />

Use it for

• A proof-point stat bar (the first adopter is the stats_bar blueprint via contentMotion: count-up)
• A single metric callout where the count-up motion reinforces the figure

Blueprints never place CountUp directly — a block sets contentMotion: count-up on its section and the shared BlockContentMotion dispatcher wraps each number.

Import

import { CountUp } from '@brikdesigns/bds';

Default

The value shapes it handles — bare integer, grouped thousands, percentage, unit suffix, currency prefix — are all the same component reading a different string:

Accessibility

• The count fires once, when at least half the number is in view. Under prefers-reduced-motion: reduce it never runs — the static final number is already the DOM text, so there is no un-gated motion path.
• The number is content, not decoration. The sweep only transiently changes the text, so assistive tech announces the final value.
• CountUp provides no accessible name of its own; it is a number inside surrounding content (a stat's caption, a section heading) that names it.

CSS Override API

API

Inherits all native <span> attributes (className, style, data-*, …).

Related

• Storybook playground