Skip to main content

​
Installation

npx shadcn-svelte@latest add number-ticker

​
Usage

<script>
  import NumberTicker from '$lib/components/magic/number-ticker/number-ticker.svelte';
</script>

<NumberTicker value={100} />

​
Examples

​
Count Up Animation

<script>
  import NumberTicker from '$lib/components/magic/number-ticker/number-ticker.svelte';
</script>

<NumberTicker value={1000} startValue={0} direction="up" />

​
Count Down Animation

<NumberTicker value={0} startValue={100} direction="down" />

​
With Decimal Places

<NumberTicker value={99.99} startValue={0} decimalPlaces={2} />

​
With Delay

<NumberTicker value={500} delay={1} />

​
Large Numbers with Formatting

<NumberTicker value={1000000} class="text-4xl font-bold" />

​
Props

​
value
number
required
The target value to animate to.
​
startValue
number
default:0
The initial value to start the animation from.
​
direction
'up' | 'down'
default:"up"
The direction of the animation. "up" counts from startValue to value, "down" counts from value to startValue.
​
delay
number
default:0
Delay in seconds before the animation starts.
​
decimalPlaces
number
default:0
Number of decimal places to display.
​
class
string
Additional CSS classes to apply to the component.

​
Features

  • Spring physics animation for natural movement
  • Automatic number formatting with locale support
  • Intersection observer triggers animation when visible
  • Support for both count-up and count-down animations
  • Configurable decimal places
  • Delay option for staggered animations

​
Animation Details

  • Uses spring physics with damping (60) and stiffness (100) for realistic motion
  • Animates at approximately 60fps for smooth visuals
  • Numbers are formatted using Intl.NumberFormat with en-US locale
  • Animation triggers when the element enters the viewport

​
Dependencies

  • motion-sv (for inView observer)

Build docs developers (and LLMs) love

Get started for freeTalk to us