A pinned section with a big odometer whose value is tied to scroll progress. Digits roll vertically and carry over like a real counter.
npx shadcn@latest add https://hyperblur.dev/r/scroll-counter-ticker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-counter-ticker.tsx.
import { ScrollCounterTicker } from "@/components/hyperblur/scroll-counter-ticker"
<ScrollCounterTicker from={0} to={12840} suffix=" km" label="Distance covered" />| Prop | Type | Default | Description |
|---|---|---|---|
| from | number | 0 | Value at the start of the section. |
| to | number | 48200 | Value at the end of the section. |
| prefix | string | "" | Text before the digits, such as a currency symbol. |
| suffix | string | "" | Text after the digits, such as a unit. |
| label | string | "Trees planted this year" | Caption under the counter. Also read by screen readers with the final value. |
| separator | string | "," | Thousands separator. Use an empty string for none. |
| length | number | 1.2 | Viewport heights of scrolling the count takes. |
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| accent | string | "#2f7bff" | Glow, affix and progress rail color. |