Animation

Odometer number

A number built from independent digit columns, each one rolling vertically to its new digit so the ones place spins while the leading digits barely move.

live throughput

updates continuously

Using Odometer number

A number built from independent digit columns, each one rolling vertically to its new digit so the ones place spins while the leading digits barely move.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: value, grouping, decimals, stiffness, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1789Number reelAnimationA windowed reel of stepped values that spins up from zero and springs to a stop with the target landing in a highlighted centre slot.

2042Sliding digit counterData displayA total that counts up by rolling each digit column into place while a star fills alongside it and bursts a few particles when it lands.

1669Blur revealAnimationA wrapper that keeps its child out of focus and slightly offset until it first enters the viewport, then resolves the blur and closes the gap in one move.

1763Bobble tile gridAnimationA grid of colored tiles that bobble away from the pointer on a spring, bouncing harder the faster the pointer swept across them.

1672Burst particle emitterAnimationWraps any element and fires a staggered fan of small specks from a chosen edge, on click, on a loop, or the first time it scrolls into view.

1674Celebration burstAnimationA canvas burst of paper flakes fired from a button, arcing out in a spread, fluttering edge on as they tumble and settling out of frame under gravity.