애니메이션
Edge Blur
가장자리로 갈수록 점진적으로 흐려지는 오버레이로, 다층 backdrop-filter 블러와 마스크 그라데이션을 겹쳐 스크롤 콘텐츠를 부드럽게 페이드아웃한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/EdgeBlur-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| edge | "top" | "bottom" | "left" | "right" | "bottom" | 블러 오버레이가 놓이는 가장자리 방향. |
| height | number | 120 | 오버레이가 차지하는 두께(px). 가장자리 방향의 폭/높이. |
| layers | number | 6 | 겹쳐 쌓을 블러 레이어 수(2~12). 많을수록 부드럽지만 무거워짐. |
| maxBlur | number | 8 | 가장 바깥 레이어의 최대 블러 반경(px). |
| fadeColor | string | "#08060E" | 콘텐츠가 사라지는 페이드 배경색(근블랙). "transparent"로 색 페이드 제거 가능. |
| fadeOpacity | number | 0.9 | 페이드 최대 불투명도(0~1). |