애니메이션
Clip Path Reveal
콘텐츠가 clip-path(inset/circle) 마스크로 스윕되며 등장하는 래퍼입니다. IntersectionObserver로 뷰포트 진입을 감지하면 마스크가 서서히 열리며, prefers-reduced-motion 사용자에게는 즉시 완전 노출됩니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ClipPathReveal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| shape | string | inset | 마스크 모양. "inset"은 가로 밴드가 오른쪽으로 열리고, "circle"은 중앙에서 원형이 확장됩니다. |
| duration | number | 0.7 | 마스크가 열리는 트랜지션 지속 시간(초). |
| threshold | number | 0.3 | IntersectionObserver 뷰포트 진입 판정 임계값(0~1). |
| className | string | undefined | 래퍼에 추가할 CSS 클래스명. |