@baneung-pack

SplitTextReveal

글자 또는 단어 단위로 순차적으로 페이드 + 슬라이드 인. 마운트 또는 스크롤로 들어올 때 발사.

라이브 미리보기 (mount 트리거)

inView 트리거 (스크롤 reveal)

아래 카드들은 화면에 들어올 때 한 번만 발사됩니다. 스크롤하며 확인해보세요.

char (기본)

word (단어 단위)

빠른 stagger (10ms)

느린 stagger + 큰 글자

사용

import { SplitTextReveal } from '@baneung-pack/effect';

// 마운트 즉시 (기본)
<SplitTextReveal text="Hello, BANEUNG!" fontSize={28} fontWeight={700} />

// 단어 단위 + 스크롤 트리거
<SplitTextReveal
  text="We build apps for the modern web."
  by="word"
  trigger="inView"
  stagger={80}
/>

API

SplitTextRevealProps

PropertyType기본값설명
textstring—표시할 텍스트 (필수).
by'char' | 'word''char'분할 단위.
staggernumber30항목 간 시작 시차 (ms).
durationnumber400항목 하나의 애니메이션 시간 (ms).
trigger'mount' | 'inView''mount'발사 시점 — mount 즉시 / 화면 진입 시.
thresholdnumber0.15inView 임계값 (0~1).
fontSizestring | number—폰트 크기.
fontWeightCSSProperties['fontWeight']—폰트 굵기.
colorstring—텍스트 색.
classNamestring—추가 클래스.
styleCSSProperties—인라인 style.