컴포넌트
Stretch Nav
네비 항목 사이를 젤리처럼 늘어나며 이동하는 gooey 인디케이터 네비게이션. SVG goo 필터(blur+contrast)가 인디케이터 실루엣을 녹은 듯 매끈하게 다듬고, 활성 위치로 이동할 때 진행 방향으로 순간 늘어났다가 복원되어 끈적한 젤리 느낌을 준다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StretchNav-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | StretchNavItem[] | [홈, 작업, 쇼케이스, 문의] | 네비 항목 목록. 각 항목은 label과 선택적 key를 가진다. |
| defaultActiveIndex | number | 0 | 비제어 모드의 초기 활성 인덱스. |
| activeIndex | number | undefined | 제어 모드 활성 인덱스. 지정 시 제어 컴포넌트로 동작. |
| onActiveChange | (index: number, item: StretchNavItem) => void | undefined | 활성 항목 변경 시 호출되는 콜백. |
| accentColor | string | #C084FC | 인디케이터/활성 텍스트 강조 색상. |
| accentColor2 | string | #EC4899 | 인디케이터 그라데이션 보조 색상. |
| surfaceColor | string | #16121F | 카드/트랙 표면 색상. |
| borderColor | string | #2A2440 | 트랙 보더 색상. |
| mutedColor | string | #A79FC0 | 비활성 항목 텍스트 색상. |
| stretchStrength | number | 1 | 이동 시 젤리 늘어남 강도(0.5~1.5 권장). |
| ariaLabel | string | 주요 메뉴 | 네비게이션 접근성 라벨. |