CountUp

숫자가 부드럽게 증가/감소하는 카운터. 통계 섹션·KPI·achievement 카드에 사용. 마운트 또는 스크롤 진입 시 발사.

라이브 미리보기

FromToDuration (1500ms)소수점 자리수 (0)천 단위 구분자

Prefix / Suffix

글자 크기 (48px)굵기 (800)색상

inView 트리거 — KPI 섹션

스크롤해서 화면 안에 들어올 때 한 번만 발사됩니다.

0+다운로드

0K활성 사용자

0.0%만족도

0.00s평균 응답

₩0매출

0고객사

0.00%가동률

0ms응답 시간

기본 정수 + 콤마

소수점 + 퍼센트

0.0%

화폐 prefix

₩0

감소 카운터 (60 → 0)

60s

사용

import { CountUp } from '@baneung-pack/effect';

// 기본 — 천 단위 콤마 자동
<CountUp to={1234567} fontSize={48} fontWeight={800} />

// 소수점 + 퍼센트
<CountUp to={99.9} decimals={1} suffix="%" />

// 화폐 + 스크롤 트리거
<CountUp to={89000000} prefix="₩" trigger="inView" />

// 감소 카운트 (60 → 0)
<CountUp from={60} to={0} suffix="s" duration={2000} />

API

CountUpProps

Property	Type	기본값	설명
from	number	0	시작 숫자.
to	number	—	목표 숫자 (필수). from보다 작으면 감소.
duration	number	1500	애니메이션 전체 시간 (ms).
separator	string	','	천 단위 구분자. 빈 문자열이면 미적용.
decimals	number	0	소수점 자리수.
decimalSeparator	string	'.'	소수점 구분자.
prefix	string	''	숫자 앞 문자열 (예: $, ₩).
suffix	string	''	숫자 뒤 문자열 (예: %, +, 명).
trigger	'mount' \| 'inView'	'mount'	발사 시점.
threshold	number	0.3	inView 임계값 (0~1).
fontSize	string \| number	—	폰트 크기.
fontWeight	CSSProperties['fontWeight']	—	폰트 굵기.
color	string	—	텍스트 색.
className	string	—	추가 클래스.
style	CSSProperties	—	인라인 style.