배경
Repel Dots
점 격자가 커서 근처에서 방사 방향으로 밀려나고 커지는 인터랙티브 Canvas 2D 배경. 거리 기반 이차 감쇠 + 스프링 보간으로 부드러운 반응과 복귀를 구현한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RepelDots-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dotColor | string | #C084FC | 점 색상. |
| bgColor | string | #08060E | 배경 색상(근-블랙). |
| gap | number | 26 | 점 사이 간격(px). |
| dotRadius | number | 1.6 | 점 기본 반지름(px). |
| influence | number | 120 | 커서 반응 반경(px). 이 안의 점만 밀림/확대. |
| pushStrength | number | 26 | 최대 밀림 거리(px). |
| maxScale | number | 3.2 | 커서 근처 점 최대 확대 배율. |
| className | string | undefined | 래퍼에 적용할 추가 클래스. |