컴포넌트
Ring Carousel
카드들을 수평 원통 아크(rotateY+translateZ)에 배치한 3D 링 갤러리입니다. perspective 무대 위에서 링 래퍼를 rotateY로 굴리고, 드래그 이동량을 각도로 환산하거나 좌우 버튼으로 한 스텝씩 회전합니다. 자작 CSS 3D transform만 사용하며 WebGL/라이브러리가 없습니다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RingCarousel-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 7 | 카드 개수. |
| radius | number | 320 | 원통 반지름(px). |
| cardWidth | number | 150 | 카드 너비(px). |
| cardHeight | number | 200 | 카드 높이(px). |
| sensitivity | number | 0.4 | 드래그 민감도(px→도 계수). |
| palette | string[] | ["#C084FC", "#EC4899", "#5EEAD4"] | 카드 절차적 그라디언트 팔레트. |
| className | string | undefined | 추가 CSS 클래스. |