텍스트 애니메이션
Wavy Text
글자들이 사인파처럼 위아래로 물결치듯 무한 반복하는 텍스트 애니메이션. 글자마다 위상차를 주어 파동이 흐르는 효과를 낸다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WavyText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | (required) | 물결칠 텍스트. |
| duration | number | 1.6 | 파동 1주기 지속(초). 작을수록 빠르게 출렁인다. |
| delayPerChar | number | 0.08 | 글자당 위상차(초). 값이 클수록 물결이 길게 이어진다. |
| amplitude | number | 10 | 위아래 진폭(px). |
| colorFrom | string | #C084FC | 그라디언트 시작 색(앞쪽 글자 계열). |
| colorTo | string | #EC4899 | 그라디언트 끝 색(뒤쪽 글자 계열). |
| className | string | undefined | 래퍼에 적용할 추가 클래스(폰트 크기/굵기 등). |