애니메이션
Wave Divider
섹션과 섹션 사이 경계를 물결치게 만드는 SVG 웨이브 디바이더. 여러 겹의 물결 레이어가 서로 다른 진폭·파장·속도로 흐르며, SVG path의 d 속성을 매 프레임 사인(sine) 함수로 재계산해 유기적인 파도 애니메이션을 만든다. 각 레이어는 CSS 단색 채움과 불투명도로 겹쳐 표현하며 외부 에셋을 쓰지 않는다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WaveDivider-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| layers | WaveLayer[] | Vivid Kit 브랜드 기본 3겹 | 겹쳐 그릴 물결 레이어 목록. 각 레이어는 진폭·주파수·속도·기준선 위치·색상·불투명도를 가진다. 미지정 시 브랜드 컬러(#C084FC·#EC4899) 기반 3겹. |
| height | number | 120 | 디바이더 높이(px). |
| flip | boolean | false | 물결을 상하 반전할지 여부. 아래쪽 섹션 경계에 사용. |
| samples | number | 60 | 파형 가로 샘플링 개수. 클수록 부드럽지만 연산량이 늘어난다. |
| className | string | "" | 추가 CSS 클래스. |