컴포넌트
Spring Menu
중앙 트리거를 토글하면 원형 유리 버블 아이콘들이 requestAnimationFrame 스프링(오버슈트 바운스)으로 팝되며 부채꼴로 펼쳐지는 메뉴로, 인덱스별 스태거 등장과 컨테이너에 격리된 커서 글로우, 키보드 내비게이션 및 reduced-motion을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpringMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | BubbleItem[] | 6개 이모지 기본 세트 | 펼칠 버블 항목 목록(label·icon·onSelect). 미지정 시 이모지 기본 데모 세트. |
| radius | number | 120 | 트리거 중심에서 버블 중심까지 펼침 반경(px). |
| spread | number | 200 | 부채꼴 총 각도(deg). 360이면 완전한 원형 배치. |
| startAngle | number | 90 | 부채꼴 중심 방향(deg). 0=오른쪽, 90=위쪽(CCW). |
| stiffness | number | 0.14 | 스프링 강성. 클수록 빠르고 탄력(팝)이 커진다. |
| damping | number | 0.72 | 스프링 감쇠(0.6~0.95 권장). 클수록 바운스가 줄어든다. |