텍스트 애니메이션
Channel Glitch Text
RGB 채널 분리와 clip-path 지터로 텍스트를 글리치처럼 떨리게 하는 애니메이션. 원본 텍스트 위에 좌/우 색상 채널(마젠타·바이올렛) 레이어 2개를 겹쳐 프레임마다 어긋뜨린다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ChannelGlitchText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | - | 표시할 텍스트 (필수). |
| speed | number | 2.5 | 글리치 1사이클 지속 시간(초). 작을수록 빠르게 떨린다. |
| intensity | number | 4 | RGB 채널 분리 최대 오프셋(px). 클수록 색 어긋남이 강해진다. |
| hoverOnly | boolean | false | true면 마우스 호버 시에만 글리치, false면 상시 재생. |
| colorLeft | string | #EC4899 | 왼쪽 채널 색상(마젠타 계열). |
| colorRight | string | #C084FC | 오른쪽 채널 색상(바이올렛 계열). |
| className | string | - | 루트 span에 적용할 추가 Tailwind 클래스(폰트 크기·굵기·색 등). |