애니메이션
Spotlight Reveal
어두운 오버레이를 커서 위치만 원형으로 뚫어 아래 콘텐츠를 드러내는 스포트라이트 인터랙션. radial-gradient 마스크가 rAF lerp로 커서를 부드럽게 추종하며, 테두리에 브랜드 컬러 발광 링을 표시한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpotlightReveal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| radius | number | 130 | 뚫리는 스포트라이트 원의 지름(px) |
| feather | number | 60 | 원에서 어둠으로 넘어가는 경계의 부드러움(px). 클수록 가장자리가 흐려짐 |
| overlayColor | string | "#0a0a14" | 오버레이(어둠) 색상 |
| overlayOpacity | number | 0.94 | 오버레이 불투명도(0~1). 가려진 영역이 얼마나 어두운지 |
| smoothing | number | 0.16 | 커서 추격 부드러움(0~1). 작을수록 느리고 부드러움 |
| ring | boolean | true | 스포트라이트 테두리에 브랜드 컬러 발광 링을 그릴지 여부 |
| idleGlow | boolean | true | 커서가 벗어났을 때 대기 상태의 은은한 스포트라이트를 유지할지 여부 |
| className | string | undefined | 컨테이너에 추가할 클래스 |
| children | React.ReactNode | undefined | 어둠 아래에서 드러나는 콘텐츠 |