컴포넌트
DotsWave
점 격자가 사인 웨이브를 따라 오르내리며 파고 높이에 맞춰 크기·밝기·브랜드 컬러가 변조되고, 포인터 근처에서 파고가 부풀어 오르는 Canvas2D 도트 웨이브 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DotsWave-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| amplitude | number | 16 | 세로 진폭(px). 도트가 위아래로 흔들리는 최대 폭. |
| frequency | number | 0.9 | 가로 파장 밀도. 클수록 촘촘한 물결을 만든다. |
| speed | number | 1 | 파도가 흐르는 속도. 클수록 위상이 빠르게 진행된다. |
| gap | number | 26 | 도트 사이 간격(px). 작을수록 조밀한 격자. |
| dotRadius | number | 3 | 도트 기본 반지름(px). 파고에 따라 배율이 곱해진다. |
| interactive | boolean | true | 포인터 리플(커서 근처 파고 부풀림) 활성화 여부. |