컴포넌트
Ring Menu
항목들이 원형 궤도에 배치되어 드래그로 무한 회전하며, 손을 떼면 관성으로 굴러가는 Canvas2D 기반 원형 메뉴다.
- 분류
- 컴포넌트
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RingMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | RingMenuItem[] | 8개 브랜드 그라데이션 기본 항목 | 원형 궤도에 배치할 메뉴 항목 목록(label/hint/gradient). 미지정 시 자체 데모 항목 사용. |
| size | number | 320 | 정사각 캔버스 한 변의 크기(px). |
| friction | number | 0.94 | 관성 회전 감쇠 계수(0~1). 1에 가까울수록 손을 뗀 뒤 더 오래 회전한다. |
| autoRotate | number | 8 | 유휴 시 자동 회전 속도(도/초). 0이면 자동 회전을 끈다. |
| perspective | number | 0.55 | 원근 투영 강도(0=정사영, 1=강한 원근). 앞쪽 항목이 커지는 정도를 조절한다. |
| className | string | "" | 루트 컨테이너에 덧붙일 추가 클래스명. |