WavyText
글자들이 파도치듯(또는 통통 튀듯) 무한 반복하는 효과. 위상 차이로 자연스러운 파동 연출.
라이브 미리보기
Wave (기본 파도)
Bounce (통통 튀김)
큰 진폭, 느린 속도
작은 진폭, 빠른 속도
사용
import { WavyText } from '@baneung-pack/effect';
// 기본 wave
<WavyText text="BANEUNG WAVE" fontSize={36} fontWeight={800} color="#3B716C" />
// bounce 모드
<WavyText text="BOUNCE!" mode="bounce" amplitude={0.4} duration={1200} />
// 큰 진폭 + 느린 속도
<WavyText text="ocean" amplitude={0.6} duration={3500} />API
WavyTextProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 표시할 텍스트 (필수). |
| mode | 'wave' | 'bounce' | 'wave' | 움직임 곡선. |
| amplitude | number | 0.25 | 진폭 (em). 위아래 움직임 폭. |
| duration | number | 2000 | 한 사이클 완료 시간 (ms). |
| phaseStep | number | 0.08 | 글자 간 위상 차이 (한 사이클 비율). |
| fontSize | string | number | — | 폰트 크기. |
| fontWeight | CSSProperties['fontWeight'] | — | 폰트 굵기. |
| color | string | — | 텍스트 색. |
| className | string | — | 추가 클래스. |
| style | CSSProperties | — | 인라인 style. |