컴포넌트
Jog Dial
화면 아래에 반쯤 잠긴 큰 원반의 림을 따라 옵션이 rotateZ로 늘어선 가로 조그 다이얼. 드래그·휠·키보드로 굴리면 각도 공간의 관성(마찰)과 디텐트 복원 토크가 함께 작용해 몇 칸 굴러가다 스스로 홈에 안착하고, 디텐트를 통과하는 순간마다 림 눈금과 상단 마커가 한순간 밝아진다. 화면 각도를 벗어난 항목은 렌더에서 빠지고 남은 항목은 각도에 비례해 blur·opacity가 감쇠하며, 확정된 라벨은 림에서 뽑혀 상단 캡션 슬롯으로 짧은 호를 그리며 올라와 앉는다. conic 시닌 핫스팟은 가장 가까운 디텐트 각도에 붙어 선택 지점이 항상 빛난다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/JogDial-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options | string[] | 7-item preset | 다이얼 림에 배치할 항목 라벨 배열. 곡면을 따라 기울어지므로 항목당 2~5자(영문 8자 이내) 권장. |
| radius | number | 210 | 원반 반지름(px). 클수록 호가 완만해지고 라벨 간격이 넓어진다. 최소 70으로 클램프. |
| angleStep | number | 20 | 항목 간 각도 간격(도) = 디텐트 한 칸. 6~70도로 클램프. |
| inertia | number | 72 | 관성 유지력(0~100). 클수록 마찰이 작아 손을 뗀 뒤 더 여러 칸 굴러간다. |
| detentTorque | number | 30 | 디텐트가 홈으로 끌어당기는 복원 토크 세기(0~100). 클수록 빨리 붙잡혀 멈춘다. |
| maxBlur | number | 2 | 가장자리 항목의 최대 블러(px). 0~8로 클램프하며 reduced-motion 시 0. |
| accentColor | string | "#C084FC" | 강조 색상. 림 conic 시닌·디텐트 눈금·상단 마커·선택 라벨 글로우에 함께 쓰인다. |