Components
Number Counter
Digits that count up once when the number scrolls into view.
A stats counter with two playback modes. ScrollTrigger fires it once; Number Flow handles the digit spin. Driven by GSAP.
Instant
Rolls up to the target as soon as the number mounts. Pass instant.
projects delivered
client retention
faster launch
Viewport
Holds at 0 until you scroll the number into view. In a nested scroll area,
wrap the counters in [data-counter-scroller].
Scroll down
projects delivered
client retention
faster launch
Installation
pnpm dlx shadcn@latest add @tween-ui/number-counterUsage
app/page.tsx
import NumberCounter from '@/components/tweenui/scroll-based/number-counter';
export default function Page() {
return (
<p>
<NumberCounter value={150} instant />+ projects delivered
</p>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Number to count to. |
duration | number | 1.8 | Count-up length in seconds. |
delay | number | 0 | Wait after the trigger before counting. |
instant | boolean | false | Skip ScrollTrigger and play as soon as it mounts. |
format | Format | grouping on | Intl-style options passed to Number Flow. |
Accessibility
Under prefers-reduced-motion: reduce the final value appears immediately,
with no digit roll. The count also runs once (once: true) so scrolling back
does not replay it.