텍스트 애니메이션
Glitch Gradient Text
흐르는 그라데이션 텍스트 위에 RGB 채널을 마젠타/시안으로 분리해 겹치고, clip-path inset를 프레임마다 점프시키는 steps 키프레임으로 가로 밴드를 잘라 좌우로 지터링하여 글리치가 겹친 그라데이션 텍스트를 만든다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlitchGradientText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | Vivid Kit | 표시할 텍스트. |
| colors | string[] | ["#C084FC","#EC4899","#5EEAD4"] | 흐르는 그라데이션 색상 정지점(2개 이상). |
| speed | number | 6 | 그라데이션 이동 1사이클 시간(초). 글리치 속도도 연동됨. |
| className | string | undefined | 루트 span에 적용할 추가 클래스. |