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.
npx shadcn@latest add https://ui.aryank.space/r/odometer-load-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 7 BLANK photographs | Stacked and wiped open in sequence at 0.25s stagger once the counter finishes. |
| background / foreground | string | #ebdc0b / #000 | Page colour and the counter and bar colour. |
| logo / siteInfo / menuLabel | string | BLANK copy | Navigation row, dropped in from above once the reveal is done. |
headingtextWordmark that rises per character.
backgroundcolorPage colour behind the loader.
gsap





