사용법
스크롤 진입 시 clip-path 마스크로 등장해요. mode로 패턴을 바꿀 수 있어요.
인터페이스
ClipRevealProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| mode | "circle" | "wipe-up" | "wipe-left" | "diamond" | "curtain" | circle | 마스크 패턴 |
| duration | number | 900 | 애니메이션 길이(ms) |
| delay | number | 0 | 지연(ms) |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
ClipReveal 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { ClipReveal } from "@goldtreedev/ui";