BlurInText
흐릿한 상태에서 선명해지며 등장하는 텍스트 효과. 마운트 또는 스크롤 진입 시 발사.
라이브 미리보기 (mount 트리거)
word (기본)
char (글자 단위)
all (한 덩어리)
강한 blur (드라마틱)
사용
import { BlurInText } from '@baneung-pack/effect';
// 단어 단위 (기본)
<BlurInText text="Hello, BANEUNG world!" fontSize={32} fontWeight={700} />
// 글자 단위 + 강한 blur
<BlurInText text="ANGULAR" by="char" stagger={60} blurAmount={14} />
// 전체 한 덩어리 + 스크롤 트리거
<BlurInText text="조용히 등장" by="all" trigger="inView" />API
BlurInTextProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 표시할 텍스트 (필수). |
| by | 'char' | 'word' | 'all' | 'word' | 분할 단위. |
| stagger | number | 50 | 항목 간 시차 (ms). by="all"이면 무시. |
| duration | number | 600 | 항목 하나의 애니메이션 시간 (ms). |
| blurAmount | number | 8 | 시작 blur 강도 (px). |
| trigger | 'mount' | 'inView' | 'mount' | 발사 시점. |
| threshold | number | 0.15 | inView 임계값 (0~1). |
| fontSize | string | number | — | 폰트 크기. |
| fontWeight | CSSProperties['fontWeight'] | — | 폰트 굵기. |
| color | string | — | 텍스트 색. |
| className | string | — | 추가 클래스. |
| style | CSSProperties | — | 인라인 style. |