GravityText
글자가 중력에 떨어지거나 흩어지는 물리 효과. mount/hover/inView 트리거 지원.
라이브 미리보기
💡 마우스를 텍스트 위에 올려보세요. 글자가 흩어졌다가 떼면 복귀합니다.
hover (마우스 올려보세요)
mount 1회
강한 흩어짐 (spread=1)
수직 낙하 (spread=0, 회전 X)
사용
import { GravityText } from '@baneung-pack/effect';
// mount 시 1회 떨어짐
<GravityText text="FALLING" />
// hover 시 흩어졌다 복귀
<GravityText text="Hover Me" trigger="hover" />
// 강한 흩어짐 + 큰 회전
<GravityText text="SCATTER" spread={1} rotation={300} gravity={400} />
// 스크롤 진입 시 1회
<GravityText text="ON SCROLL" trigger="inView" />API
GravityTextProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 표시할 텍스트 (필수). |
| trigger | 'mount' | 'hover' | 'inView' | 'mount' | 발사 시점. hover는 토글 가능. |
| duration | number | 1400 | 낙하 시간 (ms). |
| stagger | number | 30 | 글자 간 시차 (ms). |
| spread | number | 0.5 | 가로 흩어짐 강도 (0~1). |
| gravity | number | 320 | 낙하 거리 (px). |
| rotation | number | 90 | 회전 강도 — 최대 각도 (deg). |
| threshold | number | 0.2 | inView 임계값 (0~1). |
| fontSize | string | number | — | 폰트 크기. |
| fontWeight | CSSProperties['fontWeight'] | — | 폰트 굵기. |
| color | string | — | 텍스트 색. |
| className | string | — | 추가 클래스. |
| style | CSSProperties | — | 인라인 style. |