컴포넌트
Overlay Menu
토글하면 항목들이 시차(stagger)로 슬라이드/페이드 인 하는 컨테이너 내부 풀스크린 오버레이 메뉴로, 패널에 한정된 포인터 추종 스포트라이트를 갖춘다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/OverlayMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | OverlayMenuItem[] | 5개 기본 항목(홈/작업물/실험실/소개/문의하기) | 메뉴에 표시할 항목 목록(라벨 + 선택적 hint). 비어 있으면 기본값으로 대체. |
| title | string | "메뉴" | 오버레이 상단 헤더 제목이자 nav aria-label. |
| itemDurationMs | number | 460 | 각 항목이 슬라이드/페이드 인 하는 데 걸리는 시간(ms). |
| staggerMs | number | 70 | 항목 간 등장 시차 간격(ms). 인덱스 × 이 값 만큼 지연. |
| defaultOpen | boolean | false | 최초 렌더 시 오버레이를 열린 상태로 시작할지 여부. |
| onSelect | (index: number) => void | undefined | 항목을 클릭/키보드로 선택했을 때 선택 인덱스를 전달하는 콜백. |