Getting Started
Templates
Components
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:
import { StarCounterWheel } from "@/components/ui/star-counter-wheel"
export default function Example() {
return (
<StarCounterWheel
value={12500}
step={100}
duration={0.08}
delay={500}
enableSound={true}
soundVolume={0.2}
/>
)
}| 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"
/>