Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A visually engaging counter component that animates numbers with a slot-machine style scrolling effect. Features a star icon that fills progressively, sparkle effects on completion, and optional tick sounds.
Key Features:
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Target number to count up to |
step | number | 100 | Increment amount per animation step |
duration | number | 0.1 | Duration per step in seconds |
delay | number | 0 | Delay before animation starts (ms) |
enableSound | boolean | true | Enable tick sound on each number change |
soundVolume | number | 0.3 | Volume of tick sound (0-1) |
className | string | — | Additional CSS classes |
The tick sound is generated using the Web Audio API:
Disable sounds with enableSound={false} for silent operation.
The component uses your theme's accent colors and can be customized via the className prop:
<StarCounterWheel
value={5000}
className="bg-primary/10 border-primary/20"
/>