컴포넌트
Timeline
세로 타임라인. 각 노드가 스크롤 진입 시 IntersectionObserver로 순차 채워지고, 노드 사이 연결선이 위에서 아래로 자라나는 연출. 시점 라벨·제목·설명을 담은 카드가 페이드+슬라이드로 등장한다. 모션 감소 선호 시 즉시 전부 표시.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Timeline-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | TimelineItem[] | DEFAULT_ITEMS (4개 성장 연대기) | 표시할 타임라인 항목 목록. 각 항목은 time(시점 라벨)·title(제목)·description(선택 설명)을 가진다. 미지정 시 기본 4개 항목 사용. |
| colorStart | string | #C084FC | 점·연결선·시점 라벨 그라데이션의 시작 색. |
| colorEnd | string | #EC4899 | 그라데이션의 끝 색. |
| surfaceColor | string | #16121F | 타임라인 카드 표면 배경 색. |
| borderColor | string | #2A2440 | 카드 보더 및 비활성 점·연결선 트랙 색. |
| threshold | number | 0.35 | IntersectionObserver 발동 임계값(0~1). 노드가 이 비율만큼 보이면 채워짐이 시작된다. |
| staggerMs | number | 120 | 노드별 순차 등장 지연(ms). 인덱스에 곱해 계단식 연출을 만든다. |