컴포넌트
Bento Spotlight
벤토 그리드 카드가 호버 시 커서 스포트라이트, 미세 3D 틸트, 커서를 따라오는 테두리 글로우를 함께 보여주며, 모든 커서 효과는 자기 컨테이너 좌표에만 격리된 독자 구현 컴포넌트입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BentoSpotlight-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | BentoSpotlightItem[] | 브랜드 기본 5개 카드 | 렌더할 벤토 카드 목록. 각 항목은 title/description/tag/media/colSpan/rowSpan/gradient/onSelect 를 가진다. 미지정 시 브랜드 팔레트 기본 데이터를 사용. |
| columns | number | 4 | 그리드 열 개수. |
| gap | number | 14 | 카드 간격(px). |
| spotlightColor | string | #C084FC | 커서 스포트라이트 색상. |
| glowColor | string | #EC4899 | 커서를 따라오는 테두리 글로우 색상. |
| maxTilt | number | 8 | 커서 위치 기반 최대 3D 틸트 각도(도). 0이면 틸트 비활성. |