Count Up
Counts a figure's leading number up from zero the first time it scrolls into view, keeping its suffix and decimal places. Used through StatCard's countUp prop on the /services/ux-audit proof bento. Figures that don't start with a number (~4×) or are ranges (1–2 wks) render as they are.
Live Preview
<CountUp value="8+ yrs" />Behaviour
The server renders the final value, so the figure is right without JavaScript and hydration always matches. After mount the client drops it to zero and counts once in view: 1.4s on an out-curve, not a spring — the site's springs either finish too fast to read as counting or overshoot, and a number past its final value reads as a glitch. Tabular numerals keep the width steady while it counts.
Screen readers get the final value only (the counting digits are aria-hidden). Under reduced motion the figure never moves.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | - | The figure as it should finally read. Its leading number counts; everything after it is kept as a suffix. |
Import
import { CountUp } from '@/components/ui/CountUp'