Scroll Counter
Scroll percentage counter with smooth updates.
0%
Scroll this docs page
Bar and % badge stay inside this frame. Scroll down — the bar fills and the badge tweens from 0% to 100%.
Scroll past block 1
Scroll past block 2
Scroll past block 3
Scroll past block 4
Scroll past block 5
Installation
Requires MotionProvider and gsap. Add the scroll counter component with the shadcn CLI.
npx shadcn@latest add https://yami.ui.unsanity.ai/r/scroll-counter.jsonUsage
import { ScrollCounter } from "@/void/scroll/scroll-counter"
<ScrollCounter />Examples
Default
0%
Scroll this docs page
Bar and % badge stay inside this frame. Scroll down — the bar fills and the badge tweens from 0% to 100%.
Scroll past block 1
Scroll past block 2
Scroll past block 3
Scroll past block 4
Scroll past block 5
Code
import { ScrollCounter } from "@/void/scroll/scroll-counter"
<ScrollCounter />