애니메이션
Hover Glow Grid
격자 셀들이 커서 근처에서 테두리와 배경이 빛나는 인터랙티브 그리드. 포인터 위치를 CSS 변수(px)로 추적하고, 각 셀의 오프셋을 실측(ResizeObserver)하여 하나의 커서 좌표를 모든 셀의 radial-gradient 초점으로 사용한다. 커서에서 멀어질수록 반경을 벗어나 자연스럽게 어두워지며, rAF lerp 보간으로 부드럽게 추종한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HoverGlowGrid-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| columns | number | 6 | 가로 셀 개수. |
| rows | number | 4 | 세로 셀 개수. |
| gap | number | 8 | 셀 간 간격(px). |
| glowColor | string | "#C084FC" | 글로우 주 색상(테두리·배경 중심색). |
| accentColor | string | "#EC4899" | 글로우 보조 색상(가장자리로 갈수록 섞이는 색). |
| glowRadius | number | 160 | 글로우가 미치는 반경(px). 값이 클수록 넓은 범위의 셀이 빛남. |
| smoothing | number | 0.2 | 커서 추종 부드러움(0~1). 1이면 즉시, 낮을수록 지연. |
| className | string | undefined | 그리드 컨테이너에 추가할 커스텀 클래스. |