텍스트 애니메이션
Highlight Text
형광펜 하이라이트가 텍스트 뒤로 좌→우로 그어지며 강조합니다. IntersectionObserver로 뷰포트 진입 시 background-size가 0%에서 100%로 전환되어 왼쪽부터 채워집니다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HighlightText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 강조할 텍스트 (필수). |
| colorFrom | string | "#C084FC" | 형광펜 그라디언트 시작 색. |
| colorTo | string | "#EC4899" | 형광펜 그라디언트 끝 색. |
| duration | number | 0.7 | 형광펜이 그어지는 지속 시간(초). |
| delay | number | 0 | 뷰포트 진입 후 시작까지 지연(초). |
| thickness | number | 0.42 | 하이라이트 띠 높이(글자 대비 비율, 0~1). |
| once | boolean | true | true면 한 번만, false면 뷰포트 재진입마다 반복 실행. |
| className | string | undefined | 추가 CSS 클래스. |