애니메이션
Spotlight Sweep
어두운 무대 위를 큰 원뿔형 스포트라이트가 천천히 좌우로 쓸고 지나가며 콘텐츠를 강조하는 배경 효과. 두 겹의 radial-gradient(핑크 코어 + 보라 헤일로)를 겹쳐 원뿔 느낌을 만들고, requestAnimationFrame으로 위치·미세 흔들림·회전을 시간 기반으로 계산한다. 모션 축소 선호 시 정적 중앙 배치로 전환한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpotlightSweep-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| durationSec | number | 9 | 스포트라이트가 한 번 왕복하는 데 걸리는 시간(초). 값이 클수록 더 천천히 이동. 최소 2초로 클램프. |
| coneSize | number | 0.7 | 스포트라이트 콘의 크기 비율(0.2~1). 컨테이너 대비 지름 비율. |
| intensity | number | 0.55 | 스포트라이트 밝기(0~1). 그라데이션 중심의 불투명도. |
| children | React.ReactNode | undefined | 스포트라이트 배경 위에 중앙 정렬로 표시할 콘텐츠(선택). |
| className | string | "" | 루트 요소에 추가할 CSS 클래스(선택). |