사용법
콘텐츠 가장자리로 갈수록 블러 강도가 점진적으로 커져요.
Progressive blur
아래쪽 텍스트와 배경이 단계적으로 흐려지는 모습을 확인해 보세요.
인터페이스
ProgressiveBlurProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| direction | "top" | "right" | "bottom" | "left" | bottom | 블러 진행 방향 |
| blur | number | 16 | 최대 블러(px) |
| size | string | 30% | 블러 영역 크기 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
ProgressiveBlur 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { ProgressiveBlur } from "@goldtreedev/ui";