애니메이션
Entrance Presets
자식 콘텐츠를 뷰포트 진입 시 fade·scale·blur·slide 프리셋 중 하나로 공개하는 범용 래퍼. IntersectionObserver로 진입을 감지하고 CSS 트랜지션만으로 가볍게 등장시킨다. animation prop으로 프리셋을 선택하며, prefers-reduced-motion 사용자에게는 즉시 표시한다.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/EntrancePresets-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | — | 진입 애니메이션이 적용될 자식 콘텐츠 |
| animation | "fade" | "scale" | "blur" | "slide" | "fade" | 진입 애니메이션 프리셋 |
| direction | "up" | "down" | "left" | "right" | "up" | slide 프리셋의 진입 방향 |
| distance | number | 40 | slide 이동 거리(px) |
| delay | number | 0 | 등장 지연 시간(ms) |
| duration | number | 700 | 트랜지션 지속 시간(ms) |
| blurAmount | number | 12 | blur 프리셋의 초기 흐림 강도(px) |
| initialScale | number | 0.85 | scale 프리셋의 초기 축소 비율 0~1 |
| threshold | number | 0.15 | 뷰포트 진입 판정 임계값 0~1 |
| rootMargin | string | "0px 0px -10% 0px" | IntersectionObserver rootMargin |
| once | boolean | true | true면 한 번 등장 후 다시 숨기지 않음 |
| className | string | undefined | 감싸는 래퍼에 추가할 className |