컴포넌트
Rolling Digits
각 자릿수가 0~9 릴처럼 세로로 롤링하며 목표 숫자로 굴러가는 기계식 카운터로, 자릿수별 지연으로 계단식 도착 효과를 준다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RollingDigits-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | 12345 | 표시할 목표 숫자. 값이 바뀌면 릴이 새 숫자로 다시 굴러간다. 음수는 부호와 함께 절댓값을 릴로 표시. |
| minDigits | number | 0 | 최소 표시 자릿수. 부족하면 앞자리를 0으로 패딩한다 (예: 4 → "0042"). |
| groupSeparator | string | "," | 천 단위 그룹 구분 기호. 빈 문자열이면 구분 없이 표시한다. |
| cellHeight | number | 56 | 한 자릿수 릴 셀의 높이(px). 폰트 크기와 셀 너비의 기준이 된다. |
| duration | number | 900 | 릴 롤링 전환 지속 시간(ms). reduced-motion에서는 무시되고 최종 자릿수만 표시된다. |
| glowColor | string | #5EEAD4 | 커서를 따라 컨테이너 내부에만 렌더되는 글로우 색(전역 리스너 미사용, 컨테이너 상대 좌표). |