GradientText
그라데이션이 글자 위를 흐르거나 반짝이며 지나가는 효과. 히어로 타이틀·CTA 강조에 사용.
라이브 미리보기
Flow — 브랜드 navy → teal
Flow — vibrant 무지개
Shimmer — premium 다크
Diagonal flow
사용
import { GradientText } from '@baneung-pack/effect';
// flow — 브랜드 색 순환
<GradientText text="BANEUNG" fontSize={48} fontWeight={900} />
// flow — 커스텀 색상
<GradientText
text="React · TypeScript"
colors={['#FF2D78', '#A21CAF', '#3D5BFF', '#FF2D78']}
durationMs={4000}
/>
// shimmer — 반짝이는 빛
<GradientText
text="PREMIUM"
mode="shimmer"
baseColor="#1F2937"
shimmerColor="#FFD700"
/>API
GradientTextProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 표시할 텍스트 (필수). |
| mode | 'flow' | 'shimmer' | 'flow' | 효과 모드. |
| colors | string[] | navy → teal 그라데이션 | flow 모드 색상 배열. |
| direction | 'horizontal' | 'vertical' | 'diagonal' | 'horizontal' | 흐름 방향. |
| durationMs | number | 3000 | 한 cycle 완료 시간 (ms). |
| shimmerColor | string | '#ffffff' | shimmer 빛 색상. |
| baseColor | string | currentColor | shimmer 베이스 텍스트 색. |
| fontSize | string | number | — | 폰트 크기. |
| fontWeight | CSSProperties['fontWeight'] | — | 폰트 굵기. |
| color | string | — | shimmer 색 fallback (baseColor 미지정 시). |
| className | string | — | 추가 클래스. |
| style | CSSProperties | — | 인라인 style. |