배경
Ripple Dots
도트 격자 위로 클릭/자동 파문이 동심원으로 퍼지는 Canvas2D 배경. 각 파문은 중심에서 커지는 링으로, 링 부근의 도트는 반지름이 커지고 강조 색으로 섞이며 밝아진다. 여러 파문은 서로 겹쳐 간섭하고 나이에 따라 감쇠한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RippleDots-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| gap | number | 28 | 도트 격자 간격(px). 작을수록 촘촘. |
| color | string | #5EEAD4 | 도트 기본 색(기본 틸). |
| rippleColor | string | #EC4899 | 파문이 지날 때 도트에 섞이는 강조 색(기본 마젠타). |
| background | string | #08060E | 배경 색(근-블랙). |
| dotRadius | number | 1.6 | 도트 기본 반지름(px). |
| autoInterval | number | 2.4 | 자동 파문 생성 간격(초). 0이면 클릭 파문만. |
| className | string | undefined | 루트 캔버스에 적용할 추가 CSS 클래스. |