컴포넌트
Deck Cycle
3D 원근 공간에 비스듬히 쌓인 카드 더미가 자동 타이머와 클릭/키보드로 앞뒤로 순환 스왑되는 순수 CSS 3D 쇼케이스 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DeckCycle-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | DeckCycleItem[] | 내장 기본 카드 4종 | 덱에 표시할 카드 목록(id/title/description/badge/accent). 미지정 시 브랜드 기본 데이터 사용. |
| interval | number | 2800 | 자동 스왑 간격(ms). 0 이하이면 자동 스왑을 끄고 수동(클릭/키보드)만 동작. |
| depthGap | number | 60 | 카드 간 깊이 오프셋(px). translateZ 후퇴량으로 원근 깊이를 조절. |
| skew | number | 6 | 카드 기울기 각도(deg). rotateX/rotateY로 비스듬한 3D 느낌을 준다. |
| pauseOnHover | boolean | true | 마우스가 카드 위에 있을 때 자동 스왑을 일시정지할지 여부. |
| onSwap | (item: DeckCycleItem, frontIndex: number) => void | undefined | 맨 앞 카드가 바뀔 때 호출되는 콜백. |