텍스트 애니메이션
Swell Text
커서가 다가가면 글자들이 눌리듯 굵기·자간·기울기·색이 변형되는 pointer 기반 압력 텍스트 효과. rAF ease 보간으로 부드럽게 추종하고, 커서가 벗어나면 원상 복귀한다.
- 분류
- 텍스트 애니메이션
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SwellText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | 표시할 텍스트 (필수). | |
| radius | number | 90 | 눌림 반경(px). 커서가 이 거리 안에 들어온 글자만 변형된다. |
| strength | number | 1 | 최대 눌림 강도(0~1). 클수록 굵기·자간·기울기 변형 폭이 커진다. |
| ease | number | 0.18 | 변형 추종 속도(0~1). 클수록 커서를 즉각 따라가고, 작을수록 부드럽게 감쇠. |
| weightMin | number | 400 | font-weight 하한(눌림 0). |
| weightMax | number | 800 | font-weight 상한(눌림 최대). |
| spread | number | 6 | 최대 눌림 시 추가 자간(px). 눌린 글자 주변이 벌어지는 압력 느낌. |
| skew | number | 12 | 최대 눌림 시 기울기(deg). 커서 좌/우에 따라 부호가 바뀌어 밀리는 느낌. |
| color | string | #F5F3FF | 눌리지 않은 기본 글자색. |
| pressColor | string | #C084FC | 최대 눌림 시 강조색(Vivid Kit 바이올렛). |
| className | string | 래퍼 span에 적용할 추가 클래스. |