컴포넌트
Card Globe
반구(돔) 곡면에 배치된 카드 갤러리가 CSS 3D 트랜스폼으로 원근 회전하며, 드래그·관성·자동 회전과 커서 격리 스포트라이트를 지원합니다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CardGlobe-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | CardGlobeItem[] | 12개 더미 항목 | 돔에 배치할 항목 목록(라벨+선택적 배경). 미지정 시 12개 더미 항목을 자체 생성. |
| radius | number | 220 | 돔 반지름(px). 클수록 카드가 카메라 쪽으로 튀어나온다. |
| cardSize | number | 72 | 카드 한 변 크기(px). |
| autoRotate | boolean | true | yaw 축 자동 회전 사용 여부. reduced-motion 시 자동 무효. |
| spotlight | boolean | true | 커서를 따라가는 스포트라이트 사용 여부(무대 컨테이너 내부에만 렌더). |
| size | number | 320 | 무대(정사각) 한 변 크기(px). |