Stats & Numbers
Animated Stats Section
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
$ velocityx add animated-statsBuilt for astro.
Full docs for Animated Stats Section →
Animated Stats Section
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
Preview isn't available in this repo yet — install with the CLI to view the source
Props
This component's API isn't documented yet.
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/animated-stats/AnimatedStats.astroUsing the Animated Stats Section component
Install it with velocityx add animated-stats.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Puts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astroA single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation.
astro