컴포넌트
Magnify Dock
macOS 독처럼 아이콘 위에 커서를 올리면 근접한 아이콘이 부드럽게 확대되는 매그니피케이션 독. pointer x 좌표와 각 아이콘 중심 사이 거리를 코사인 폴오프로 환산해 목표 스케일을 구하고, requestAnimationFrame 스프링으로 추적한다. 확대된 아이콘은 위로 떠오르고 글로우/보더가 강조되며 툴팁이 표시된다. 키보드 방향키 이동과 Enter/Space 활성화, reduced-motion 대응을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MagnifyDock-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | DockItem[] | 6개 이모지 기본 세트 | 독에 표시할 항목 목록(label·icon·onSelect). 미지정 시 이모지 기본 데모 세트. |
| baseSize | number | 48 | 기본(비확대) 아이콘 변 길이(px). |
| maxSize | number | 84 | 커서 바로 아래 아이콘의 최대 변 길이(px). |
| influence | number | 140 | 확대 영향 반경(px). 커서-아이콘 중심 거리가 이 값을 넘으면 기본 크기. |
| gap | number | 12 | 아이콘 사이 간격(px). |
| lift | number | 10 | 확대 시 위로 떠오르는 최대 오프셋(px). 0이면 상승 없음. |
| accentColor | string | #C084FC | 강조 글로우/보더 색. |
| secondaryColor | string | #EC4899 | 보조 강조 색(툴팁 그라데이션 등). |
| stiffness | number | 0.22 | 스프링 추적 강성(0~1). 클수록 빠르게 목표 크기에 붙음. |
| showTooltip | boolean | true | 툴팁 표시 여부. |
| className | string | undefined | 루트 nav에 적용할 클래스. |
| style | CSSProperties | undefined | 루트 nav에 병합할 인라인 스타일. |