Data & Status

Animated Number

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

Preview

text motion

count up to the latest value

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/number-ticker.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/number-ticker.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/number-ticker.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/number-ticker.json

typescript

Copied

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

Prop	Type	Default	Description
value	number	-	Target number.
startValue	number	0	Initial number.
direction	"up" \| "down"	"up"	Count direction.
delay	number	0	Start delay.
decimalPlaces	number	0	Decimal precision.