텍스트 애니메이션
Variable Weight Wave
가변폰트 wght 축을 사인파로 스윕해 굵기의 마루가 글자 사이를 흐르는 물결 텍스트. 위상차로 굵기 파동을 만들고 같은 사인값을 3색 그라디언트 보간에 재사용한다. minWeight·maxWeight를 사용 중인 폰트의 실제 wght 축 범위에 맞추면 파형이 잘리지 않는다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/VariableWeightWave-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | VARIABLE | 물결이 흐를 텍스트. |
| minWeight | number | 100 | 가변폰트 최소 굵기(wght 축). |
| maxWeight | number | 900 | 가변폰트 최대 굵기. |
| periodMs | number | 2600 | 파동 1주기 시간(ms). 작을수록 빠름. |
| phaseStep | number | 0.55 | 인접 글자 간 위상차(라디안). 파장을 조절한다. |
| className | string | undefined | 루트 요소에 적용할 추가 CSS 클래스. |