Skip to content

component

Better Counter

By ALEXANDRE

Details

Summary

About Better Counter A counter looks simple until it starts moving.

Description

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

Introduction

The boring good counter

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200128838/148/228/309/79/15
  • All · #1753