애니메이션
Fade In
자식 콘텐츠가 뷰포트에 진입할 때 페이드+슬라이드 인으로 등장하는 래퍼 컴포넌트. IntersectionObserver로 진입을 감지하며 방향/지연/거리/임계값을 옵션으로 제어한다. prefers-reduced-motion 사용자에게는 애니메이션 없이 즉시 표시하고, SSR 안전 및 cleanup을 보장한다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FadeIn-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | — | 페이드+슬라이드 인 될 자식 콘텐츠 |
| direction | "up" | "down" | "left" | "right" | "none" | "up" | 슬라이드 진입 방향 (none이면 페이드만) |
| delay | number | 0 | 등장 지연 시간(ms) |
| duration | number | 700 | 트랜지션 지속 시간(ms) |
| distance | number | 32 | 슬라이드 이동 거리(px) |
| threshold | number | 0.15 | 뷰포트 진입 판정 임계값 (0~1) |
| once | boolean | true | true면 한 번 등장 후 다시 사라지지 않음 |
| className | string | undefined | 래퍼에 추가할 className |