텍스트 애니메이션
Glyph Trail
커서를 따라 글자들이 트레일로 흩뿌려지며 이동·회전하다 서서히 페이드아웃되는 Canvas2D 인터랙티브 텍스트 효과.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlyphTrail-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | Vivid | 커서를 따라 순환하며 스폰될 글자들. 공백은 제외된다. |
| lifespan | number | 900 | 글자 하나의 수명(ms). 클수록 트레일이 오래 남는다. |
| spawnDistance | number | 26 | 새 글자를 스폰하기 위한 최소 커서 이동 거리(px). 작을수록 촘촘한 트레일. |
| fontSize | number | 24 | 흩날리는 글자의 폰트 크기(px). |
| drift | number | 60 | 초기 확산 속도 배율(px/s). 클수록 멀리 흩날린다. |
| palette | string[] | ["#C084FC","#EC4899","#5EEAD4"] | 글자에 순환 배정되는 색 팔레트(Vivid Kit 브랜드 삼색). |