컴포넌트
Stagger List
항목이 스크롤 진입 또는 마운트 시 순차로 페이드+상승하며 등장하는 리스트. IntersectionObserver로 뷰포트 진입을 감지하고 항목별 CSS 전환 지연(스태거)으로 계단식 등장을 구현한다. 각 항목은 hover/focus 시 보더·그림자·이동으로 강조되며 클릭 콜백과 키보드(Enter/Space) 접근성을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StaggerList-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | StaggerListItem[] | 4개 기본 항목 | 표시할 항목 목록 (id/title/description/icon). 미지정 시 기본 데모 데이터 사용. |
| stagger | number | 90 | 항목 간 등장 지연 (ms). |
| duration | number | 480 | 개별 항목 페이드/상승 전환 시간 (ms). |
| offsetY | number | 18 | 등장 시 아래에서 올라오는 거리 (px). |
| accentFrom | string | #C084FC | 강조 그라데이션 시작 색상. |
| accentTo | string | #EC4899 | 강조 그라데이션 끝 색상. |
| surfaceColor | string | #16121F | 카드 표면 배경색. |
| borderColor | string | #2A2440 | 카드 기본 보더 색상. |
| revealOnScroll | boolean | true | true면 스크롤 진입 시 등장, false면 마운트 즉시 스태거 등장. |
| onItemClick | (item: StaggerListItem, index: number) => void | undefined | 항목 클릭/Enter/Space 시 호출. 지정 시 항목이 button role로 전환. |
| className | string | "" | 루트 ul에 추가할 클래스. |