배경
Wave Lattice
격자 점들이 중심에서 퍼지는 동심 파동으로 밝기와 크기가 물결치는 배경. Canvas 2D에서 각 점의 중심 거리와 시간으로 사인 위상을 계산해 반지름·불투명도를 물결치게 하고, 파동 마루에서는 강조색으로 블렌드한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WaveLattice-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dotColor | string | #C084FC | 점 색상(밝은 파동 색). |
| accentColor | string | #EC4899 | 파동 정점에서 섞이는 강조 색상. |
| bgColor | string | #08060E | 배경 색상(근-블랙). |
| gap | number | 22 | 점 사이 간격(px). |
| dotRadius | number | 1.4 | 점 기본 반지름(px). |
| wavelength | number | 90 | 파동의 공간 파장(px). 클수록 물결 간격이 넓어짐. |
| speed | number | 70 | 파동 진행 속도(px/초). |
| amplitude | number | 2.6 | 파동 정점에서 점 반지름이 커지는 최대 배율. |
| originX | number | 0.5 | 파동 중심 x(0~1, 컨테이너 비율). |
| originY | number | 0.5 | 파동 중심 y(0~1, 컨테이너 비율). |
| className | string | undefined | 래퍼 div에 추가할 CSS 클래스. |