컴포넌트
Scatter Grid
포스터 카드들이 3D 원근 공간에 흩뿌려져 떠 있다가 호버·포커스하면 가지런한 격자로 정렬되는 CSS 3D transform 갤러리.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ScatterGrid-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | FlyingPosterItem[] | 6개 브랜드 더미 포스터 | 표시할 포스터 목록(id/title/subtitle/color). 미지정 시 자체 기본 더미 데이터 사용. |
| scatter | number | 120 | 흩뿌림 강도(px). 클수록 정렬 전 포스터들이 더 멀리 퍼진다. |
| perspective | number | 1100 | 3D 원근 깊이(px). 작을수록 원근 왜곡이 강해진다. |
| tiltStrength | number | 10 | 커서 추종 시차 강도(deg). 컨테이너 상대 좌표로만 무대를 기울인다. 0이면 시차 없음. |
| posterWidth | number | 132 | 포스터 한 장의 폭(px). 정렬 격자 셀 크기 산정에 사용. |
| onSelect | (item: FlyingPosterItem, index: number) => void | undefined | 포스터 클릭 또는 Enter/Space 선택 시 호출되는 콜백. |