component
Better Counter
By ALEXANDRE
Details
- ALEXANDREAuthor
- componentType
- 2026-06-05Published
- 2026-08-12Updated
- 2026-06-02Added
- InteractiveCategories
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.
- All · #1753