텍스트 애니메이션
Cursor Swell
마우스 커서에 가까운 글자일수록 굵어지고 커지는 근접 반응 텍스트. pointermove로 커서 좌표를 추적하고 requestAnimationFrame 루프에서 글자별 중심까지의 거리를 반경으로 정규화해 font-weight와 scale에 매핑한다. 리렌더 폭주를 막기 위해 스타일을 DOM ref로 직접 갱신하며, 지수 보간으로 부드럽게 따라온다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CursorSwell-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | (required) | 표시할 텍스트. 커서 근접도에 따라 글자별로 반응한다. |
| radius | number | 120 | 반응 반경(px). 커서가 이 거리 안으로 들어온 글자만 굵어지고 커진다. |
| fromWeight | number | 300 | 기본(먼 곳) 굵기. 100~900. |
| toWeight | number | 900 | 최대 근접(커서 바로 위) 굵기. 100~900. |
| maxScale | number | 1.4 | 커서 바로 위 글자의 최대 확대 배율. 1이면 확대 없음. |
| colorFrom | string | #C084FC | 그라디언트 시작 색(첫 글자 계열). |
| colorTo | string | #EC4899 | 그라디언트 끝 색(마지막 글자 계열). |
| smoothing | number | 0.18 | 근접 상태 보간 부드러움(0~1). 클수록 즉각 반응, 작을수록 느리게 따라감. |
| className | string | undefined | 래퍼 span에 적용할 추가 클래스. |