애니메이션
Cursor Trail
커서를 따라 브랜드 컬러(보라·핑크) 잔상 점들이 지연 추격하며 서서히 사라지는 커서 트레일 효과입니다. Canvas 2D와 requestAnimationFrame lerp 기반으로 컨테이너 내부에서만 동작하며, 각 파티클이 개별 추격 속도와 수명을 가져 늘어지는 잔상을 만듭니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CursorTrail-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dotSize | number | 10 | 방출되는 점의 기준 크기(px)입니다. |
| trailLength | number | 24 | 트레일 잔상 개수(동시 최대 파티클 근사)입니다. 클수록 잔상이 길어집니다. |
| fadeSpeed | number | 0.02 | 점이 사라지는 속도입니다. 클수록 빨리 사라집니다. |
| followEase | number | 0.18 | 커서를 얼마나 느리게 추격하는지(0~1). 작을수록 잔상이 늘어집니다. |
| glow | boolean | true | 잔상에 글로우(발광) 효과를 적용할지 여부입니다. |
| className | string | undefined | 컨테이너에 추가할 CSS 클래스입니다. |