v2 · scrollCounter · formatted

Number counter on scroll

Counting statistics up as they enter the viewport is the standard social-proof pattern, and it is usually a hand-rolled requestAnimationFrame loop plus an IntersectionObserver plus formatting logic. scrollCounter is those three things in one call, with a format function so 1200000 can render as $1.2M without you touching the animation.

The code

A dark social proof section with 4 live counters — each with a different format function. Numbers count up from zero as the section scrolls into view. Cards also fade in with scrollAnimate.

Hero.tsx
import { scrollCounter, scrollAnimate } from 'svg-scroll-draw';

// Users — integer with locale formatting
scrollCounter('#users', {
  to: 50_000,
  format: n => Math.round(n).toLocaleString() + '+',
  once: true,
});

// Satisfaction — fixed decimal percentage
scrollCounter('#satisfaction', {
  to: 94.7,
  format: n => n.toFixed(1) + '%',
  once: true,
});

// KB size — prefix notation
scrollCounter('#size', {
  to: 9,
  format: n => '~' + Math.round(n),
  once: true,
});

// Zero — counts down to 0 (dependencies)
scrollCounter('#deps', { to: 0, once: true });

Live — scroll it

The numbers
0+developers
~0KB gzipped
0tests green
0dependencies

Install

terminal
npm i svg-scroll-draw

MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →