컴포넌트
Bento Grid
크기가 다른 셀들이 CSS grid의 col/row span으로 배치되는 벤토 그리드. 커서를 올리면 셀별 로컬 좌표를 추종하는 radial 스포트라이트가 셀 경계를 넘어 이어지고, hover 셀은 확대(scale)되며 글로우와 그림자가 강해진다. 셀은 그라데이션 배경과 아이콘/이모지로 구성.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BentoGrid-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | BentoItem[] | DEFAULT_ITEMS (6개 브랜드 기본 셀) | 벤토 셀 목록. 각 셀은 id/title/description/icon/colSpan/rowSpan/gradient/onSelect를 가진다. 미지정 시 브랜드 기본 데이터로 렌더. |
| columns | number | 4 | 그리드 열 개수. |
| gap | number | 12 | 셀 간격(px). |
| spotlightColor | string | "#C084FC" | 커서 스포트라이트 색상(Vivid Kit 퍼플). |
| glowColor | string | "#EC4899" | 셀 hover 글로우/보더/그림자 색상(핑크). |
| hoverScale | number | 1.03 | 셀 hover 시 확대 배율. 1이면 확대 없음. reduced 모션 시 1로 강제. |
| spotlightRadius | number | 260 | 스포트라이트 반경(px). 클수록 넓게 퍼짐. |
| className | string | undefined | 그리드 컨테이너에 추가할 클래스. |