텍스트 애니메이션
Outline Text
글자 외곽선이 그려지듯 stroke가 순차로 그어진 뒤 안쪽 fill이 채워지는 SVG 텍스트 애니메이션. <text>는 pathLength 정규화가 불가하므로 글리프 둘레를 폰트 크기로 추정해 stroke-dasharray/stroke-dashoffset(둘레→0)으로 선을 긋고, 완료 후 별도 fill 레이어의 opacity를 올려 안쪽을 채운다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/OutlineText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | "Vivid Kit" | 외곽선이 그려질 텍스트. |
| drawDuration | number | 2.2 | stroke가 그려지는 시간(초). |
| fillDuration | number | 0.9 | 안쪽 fill이 채워지는 시간(초). |
| fillDelay | number | 0.15 | stroke 완료 후 fill 시작까지의 지연(초). |
| fontSize | number | 88 | 폰트 크기(px, SVG 좌표계 기준). |
| fontWeight | number | string | 800 | 폰트 굵기. |
| strokeWidth | number | 1.6 | 외곽선 두께(px). |
| strokeFrom | string | "#C084FC" | 외곽선 그라디언트 시작 색. |
| strokeTo | string | "#EC4899" | 외곽선 그라디언트 끝 색. |
| fillColor | string | "#EC4899" | 안쪽 채움 색. |
| loop | boolean | true | 재생을 무한 반복할지 여부. |
| loopPause | number | 1.2 | 무한 반복 시 한 사이클 사이의 대기 시간(초). |
| className | string | undefined | 추가 CSS 클래스. |