Data & Status

Animated Number

목표 숫자까지 자연스럽게 증가하거나 감소하는 숫자 애니메이션입니다.

Preview

text motion

0

count up to the latest value

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/number-ticker.json

Code

typescript
Copied
1import { NumberTicker } from "@/components/number-ticker"23export default function Example() {4  return <NumberTicker value={1200} />5}

Props

PropTypeDefaultDescription
valuenumber-Target number.
startValuenumber0Initial number.
direction"up" | "down""up"Count direction.
delaynumber0Start delay.
decimalPlacesnumber0Decimal precision.

Reference

Reference Animated Number