애니메이션
Spotlight Rim
커서를 따라 스포트라이트(radial glow)가 이동하며 카드의 표면과 테두리를 부드럽게 비추는 인터랙티브 카드. pointermove로 CSS 변수 --x/--y를 갱신하고 requestAnimationFrame lerp 보간으로 부드럽게 추종한다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpotlightRim-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | undefined | 카드 내부 콘텐츠. |
| spotlightColor | string | "#C084FC" | 스포트라이트 글로우 색상(radial-gradient 중심색). |
| borderColor | string | "#EC4899" | 테두리 하이라이트 색상. |
| radius | number | 260 | 스포트라이트 반경(px). 클수록 넓게 퍼짐. |
| intensity | number | 0.55 | 글로우 세기(0~1). 표면 밝기 배율. |
| smoothing | number | 0.18 | 커서 추종 부드러움(0~1). 1이면 즉시, 낮을수록 지연. |
| className | string | undefined | 추가 CSS 클래스. |