배경
Grid Spotlight
격자 배경 위에서 커서를 따라 원형 스포트라이트가 셀을 밝힌다. CSS mask와 --x/--y 커스텀 프로퍼티로 좌표를 갱신해 리렌더 없이 동작한다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GridSpotlight-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| cell | number | 40 | 격자 셀 한 변 크기(px). |
| radius | number | 200 | 스포트라이트 반경(px). |
| color | string | #C084FC | 격자 선/글로우 강조색. |
| background | string | #08060E | 배경(near-black) 색상. |
| className | string | undefined | 추가 CSS 클래스. |