GlitchText
RGB 채널이 어긋나는 글리치 효과. 강도(intensity) 조절 가능, 항상 또는 hover 시에만 트리거.
라이브 미리보기
강한 글리치 (always)
약한 글리치 (subtle)
hover 트리거 (마우스를 올려보세요)
브랜드 컬러 채널
사용
import { GlitchText } from '@baneung-pack/effect';
// 기본 글리치
<GlitchText text="SYSTEM FAILURE" intensity={0.6} />
// hover 시에만 트리거
<GlitchText text="HOVER ME" triggerOn="hover" intensity={0.7} />
// 커스텀 채널 색
<GlitchText
text="BANEUNG"
redChannelColor="#FF2D78"
cyanChannelColor="#5BA8A0"
/>API
GlitchTextProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 표시할 텍스트 (필수). |
| intensity | number | 0.5 | 글리치 강도 (0~1). |
| triggerOn | 'always' | 'hover' | 'always' | 항상 / hover 시에만 글리치. |
| speedMs | number | 2200 | 베이스 애니메이션 시간 (ms). |
| redChannelColor | string | '#ff003c' | 적색 채널 색상. |
| cyanChannelColor | string | '#00fbff' | 청록 채널 색상. |
| fontSize | string | number | — | 폰트 크기. |
| fontWeight | CSSProperties['fontWeight'] | — | 폰트 굵기. |
| color | string | currentColor | 베이스 텍스트 색. |
| className | string | — | 추가 클래스. |
| style | CSSProperties | — | 인라인 style. |