Vibeset

Rising counter

The hard part of a counter is not counting, it is counting without getting in the way. The rising number is written straight to the node and never goes through React state: that is sixty changes a second, and repainting a tree for each one is an absurd price. The final value always lives in the DOM, in transparent text that reserves exactly the right width, so the page does not move while it climbs and a screen reader hears "83", not "17, 31, 52". The curve drops fast and settles slowly: a linear climb looks like a loading bar.

And the React Bits original: Count Up

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Count Up, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For real figures that tell something: users, releases, downloads. An invented figure with an animation is still invented.

Watch out for

Before animating, check what text is served: what a bot that does not run JavaScript sees has to be the final figure, not the starting zero.

Accessibility

It respects the system reduced-motion setting and carries some aria. Try it with a screen reader: a value that keeps changing is the hardest thing to read.