텍스트 애니메이션
Gloss Text
금속 광택(shimmer)이 텍스트를 가로질러 쓸고 지나가는 효과. 그라데이션 마스크와 background-position 애니메이션으로 구현했으며 reduced-motion을 지원한다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlossText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | - | 광택이 지나갈 텍스트/노드. |
| baseColor | string | "#C084FC" | 광택이 없는 부분의 베이스 텍스트 색. |
| shineColor | string | "#EC4899" | 광택(하이라이트) 색. |
| speed | number | 3 | 한 번 쓸고 지나가는 시간(초). 작을수록 빠름. |
| shineWidth | number | 0.28 | 광택 밴드의 폭 비율(0~1). 클수록 넓은 하이라이트. |
| className | string | undefined | 추가 Tailwind/CSS 클래스 (크기·굵기 등). |