애니메이션
Jelly Cursor
커서를 부드럽게 따라오는 젤리 같은 블롭 커서. SVG goo 필터(feGaussianBlur + feColorMatrix)로 여러 원을 하나의 액체처럼 합치고, requestAnimationFrame 러프(lerp) 추격으로 리더 원과 지연 팔로워 원들이 커서를 늘어지듯 뒤쫓습니다. 상호작용은 컨테이너 내부로 한정됩니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/JellyCursor-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | undefined | 컨테이너 내부에 겹쳐 표시할 콘텐츠(안내 문구 등). |
| colors | readonly [string, string] | ["#C084FC", "#EC4899"] | 블롭 색상 2개. goo 필터로 합쳐지며 Vivid Kit 팔레트가 기본값. |
| size | number | 56 | 리더 원의 지름(px). |
| smoothing | number | 0.18 | 추격 부드러움(0~1). 낮을수록 더 물렁하게 지연. |
| gooStrength | number | 12 | goo 블러 강도(px). 높을수록 더 끈적한 액체 느낌. |
| background | string | "#0b0710" | 컨테이너 배경 색상. |
| className | string | "" | 추가 CSS 클래스. |