텍스트 애니메이션
Gradient Underline
하단에만 no-repeat 그라데이션 배경을 깔고 background-size의 가로폭을 0%→100%로 transition하여 밑줄이 좌→우로 그어지며 등장한다. JS 애니메이션 루프 없이 순수 CSS transition으로 동작.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GradientUnderline-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | Vivid Kit | 밑줄이 그어질 텍스트. |
| thickness | number | 3 | 밑줄 두께(px). |
| speed | number | 0.6 | 밑줄이 좌→우로 그어지는 시간(초). |
| colors | string[] | ["#C084FC","#EC4899","#5EEAD4"] | 밑줄 그라데이션 색상 정지점(2개 이상). |
| className | string | undefined | 루트 span에 적용할 추가 클래스. |