애니메이션
Cursor Pull
커서가 근접하면 요소가 자석처럼 커서 쪽으로 끌려가고, 벗어나면 스프링 물리로 원위치로 부드럽게 복귀합니다. 근접도에 따라 미세한 3D 기울임과 글로우가 강조됩니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CursorPull-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | — | 자석 효과를 입힐 콘텐츠(버튼·카드·텍스트 등). |
| radius | number | 180 | 커서가 이 반경(px) 안에 들어오면 끌려가기 시작. |
| strength | number | 40 | 최대 이동 거리(px). 커서가 요소 위에 가까울수록 이 값에 근접. |
| stiffness | number | 0.18 | 스프링 강성(0~1). 클수록 빠르게 목표점에 붙음. |
| damping | number | 0.72 | 감쇠(0~1). 클수록 진동 없이 안착. |
| tilt | number | 6 | 자화 상태에서 커서 방향으로 기울이는 최대 각도(deg). 0이면 회전 없음. |
| glowColor | string | #C084FC | 근접 시 강조되는 글로우 색. |
| className | string | undefined | 래퍼 요소에 적용할 추가 클래스. |
| style | CSSProperties | undefined | 래퍼 요소에 적용할 인라인 스타일. |