Back

Number Ticker

Satu Visual Component

A number that springs to its target when scrolled into view.

Installation

Add it with the CLI:

Terminal

$

Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.

Usage

Great for stats. Animates once when it enters the viewport.

Props

PropTypeDefaultDescription
valuenumberTarget number to count to.
direction"up" | "down""up"Count up from 0 or down to 0.
delaynumber0Delay before starting, seconds.
classNamestringExtra classes.

Requirements

Install the npm dependencies:

Terminal

$