컴포넌트
Color Bloom
커서와의 거리에 따라 각 컬러 셀이 채도/밝기 방사 스포트라이트로 살아나는 그리드로, 효과가 컨테이너 내부에만 한정된다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ColorBloom-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| columns | number | 4 | 그리드 열 수 |
| rows | number | 3 | 그리드 행 수 (자체 더미 셀 생성 시 columns*rows개) |
| spotlightRadius | number | 180 | 스포트라이트 반경(px). 클수록 넓은 범위가 살아남 |
| gap | number | 12 | 셀 간격(px) |
| lift | number | 10 | 커서 근접 시 최대 3D 리프트(px). 0이면 평면 유지 |
| onCellActivate | (index: number) => void | undefined | 셀 클릭/키보드 활성화 콜백. 지정 시 셀이 버튼처럼 상호작용 |