컴포넌트
Scatter Card
호버 시 카드 표면과 라벨을 샘플링한 픽셀 정점들이 커서를 피해 흩어졌다가(디케이), 커서가 벗어나면 스프링 복원으로 다시 모여 원본이 복구되는 Canvas2D 카드.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ScatterCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | DECAY | 카드 중앙에 새겨져 정점으로 흩어질 라벨 텍스트. |
| gap | number | 7 | 정점 샘플 간격(px). 작을수록 조밀하지만 정점 수가 늘어 무거워짐. |
| repelRadius | number | 90 | 커서 반발 반경(px). 이 반경 안의 정점이 강하게 흩어짐. |
| repelForce | number | 2.6 | 커서 반발 세기. 클수록 정점이 더 멀리 흩어짐. |
| bgColor | string | #08060E | 카드 배경(표면) 색. 정점이 흩어졌을 때 뒤로 보이는 바탕. |
| className | string | "" | 루트 컨테이너에 추가할 CSS 클래스. |