텍스트 애니메이션
Glide Counter
뷰포트에 진입하면 0(또는 시작값)에서 목표값까지 숫자가 부드럽게 증가하는 카운트업 효과. IntersectionObserver로 화면 진입을 감지하고 requestAnimationFrame + ease-out 이징으로 애니메이션하며, 마지막 프레임은 이징 오차를 배제하고 정확한 목표값을 표시한다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlideCounter-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| to | number | — | 목표 숫자값 (필수). |
| from | number | 0 | 시작 숫자값. |
| duration | number | 2 | 카운트업 지속 시간(초). |
| decimals | number | 0 | 표시할 소수점 자릿수. |
| prefix | string | "" | 숫자 앞에 붙일 접두어(예: "$"). |
| suffix | string | "" | 숫자 뒤에 붙일 접미어(예: "%", "+"). |
| separator | boolean | true | 천 단위 구분자 사용 여부(toLocaleString). |
| colors | [string, string] | ["#C084FC", "#EC4899"] | 그라디언트 텍스트 색상 [시작, 끝]. 기본은 Vivid Kit 팔레트. |
| className | string | undefined | 추가 CSS 클래스(폰트 크기/굵기 등). |
| style | CSSProperties | undefined | 인라인 스타일 오버라이드. |