컴포넌트
Spring Fan
겹쳐 쌓인 카드 스택이 hover/focus/tap 시 자작 감쇠 스프링 rAF로 탄성 바운스를 내며 부채꼴로 펼쳐지는 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpringFan-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| cards | BounceCard[] | 5개 브랜드 더미 카드 | 펼칠 카드 목록. 미지정 시 브랜드 컬러 기본 카드 사용 (각 카드는 id/label/accent). |
| spreadGap | number | 62 | 펼쳤을 때 인접 카드 간 수평 간격(px). |
| fanAngle | number | 16 | 부채꼴 양끝 카드의 최대 회전각(deg). 아치 높이에도 반영. |
| bounciness | number | 0.62 | 스프링 강성/감쇠 매핑(0~1). 클수록 더 크게 튕기는 오버슈트. |
| spreadByDefault | boolean | false | true면 상호작용 없이도 초기부터 부채꼴 펼침 상태 유지. |
| onCardActivate | (card: BounceCard, index: number) => void | undefined | 카드 클릭 또는 Enter/Space 활성화 시 호출되는 콜백. |