컴포넌트
Marquee Menu
세로 메뉴 항목에 호버/포커스하면 커서가 들어온 방향에서 그라데 스트립이 슬라이드 인하고 반복 텍스트·이미지 블록이 가로로 흐르는 마퀴 메뉴.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MarqueeMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | MarqueeMenuItem[] | 4개 기본 항목 | 메뉴 항목 목록(label/meta/swatch/key). 미지정 시 데모용 기본 항목 제공. |
| accentColor | string | #C084FC | 마퀴 스트립/글로우 강조 색(브랜드 바이올렛). |
| accentColor2 | string | #EC4899 | 마퀴 스트립 보조 그라데 색(브랜드 핑크). |
| marqueeSpeed | number | 9 | 마퀴가 한 바퀴 흐르는 주기(초). 작을수록 빠름. |
| revealDuration | number | 480 | 스트립 방향 슬라이드 인/아웃 시간(ms). |
| showGlow | boolean | true | 커서 추종 글로우 표시 여부. 항목 자신의 컨테이너 내부로만 렌더(전역/전체화면 미사용). |