Better Counter

Show Preview
Better Counter

About Better Counter

About Better Counter

A counter looks simple until it starts moving.

Then the hidden problems show up: React re-renders, jumping digits, awkward formatting, and screen readers hearing the animation instead of the result.

Better Counter is built for those hidden parts. It animates through browser animation frames and direct text updates, keeps digits stable, formats the final value, and gives screen readers one clean result.

Built for stats, prices, percentages, and metrics that need clean motion without the mess around it.

Why Better Counter

  • No React re-render loop

    The visual number updates with browser animation frames and direct text changes, so React does not re-render every count step.

  • Digits stay stable

    Hidden ghost values reserve width, while padding, grouping, decimals, prefixes, suffixes, and tabular numbers are handled from the controls.

  • Screen readers get one value

    The animated number is hidden from assistive tech, while a separate value exposes the final formatted number.

  • Motion respects context

    Static render, reduced motion, above-fold final mode, and viewport-triggered animation are handled.

Good fit / Wrong fit

  • Good fit: stats, prices, percentages, and metrics that need clean motion.

  • Wrong fit: odometers, show-off animations, or full dashboards.

Contact & Support

Questions about setup, product, or licensing: alexandre@madebymash.com