PRO

Odometer Load Hero

A percentage counter built as three independent reels rather than a number that increments. Each digit column is a strip of numerals translated by its own total height over its own duration, so the units reel takes five seconds, the tens six, and the hundreds column only two starting at second five: they finish together at 100 without any shared clock, and the mismatched speeds are what make it read mechanically. The units column is seeded with twenty one numerals so it can spin twice before landing. When it ends, a bar fills to thirty percent, jumps to full while fading, then seven photographs wipe open in sequence as the whole hero scales up and the wordmark rises per character.

Component

Loading

0
1
0
1
2
3
4
5
6
7
8
9
0
0
1
2
3
4
5
6
7
8
9
%

Howard

Install
npx shadcn@latest add https://ui.aryank.space/r/odometer-load-hero.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagesstring[]7 BLANK photographsStacked and wiped open in sequence at 0.25s stagger once the counter finishes.
background / foregroundstring#ebdc0b / #000Page colour and the counter and bar colour.
logo / siteInfo / menuLabelstringBLANK copyNavigation row, dropped in from above once the reveal is done.
Customize
headingtext

Wordmark that rises per character.

backgroundcolor

Page colour behind the loader.

Dependencies
gsap