텍스트 애니메이션
Word Reveal
스크롤로 뷰포트에 진입하면 단어들이 흐릿→선명, 아래→제자리로 순차 공개되는 텍스트 애니메이션. IntersectionObserver로 가시성을 감지하고, 컴포넌트 고유 keyframe(blur+translateY)과 단어별 지연으로 순차 등장 효과를 만든다. reduced-motion 시 즉시 표시하며 SSR에 안전하다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WordReveal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | 공개할 원문 텍스트 (aria-label로 제공). | |
| stagger | number | 90 | 단어 간 순차 지연(ms). |
| duration | number | 0.7 | 개별 단어 애니메이션 지속(초). |
| distance | number | 24 | 아래에서 올라오는 시작 오프셋(px). |
| threshold | number | 0.25 | IntersectionObserver 진입 임계값(0~1). |
| once | boolean | true | true면 한 번만 공개, false면 재진입 시 다시 애니메이션. |
| className | string | undefined | 컨테이너에 적용할 추가 클래스. |