텍스트 애니메이션
Split Stagger
텍스트를 글자 또는 단어 단위로 쪼개 아래에서 위로 순차(stagger) 페이드+상승하며 등장하는 애니메이션. CSS 키프레임과 animation-delay 스태거로 구현했으며, reduced motion 환경에서는 즉시 최종 상태로 표시됩니다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SplitStagger-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | — | 애니메이션할 텍스트 (필수) |
| splitBy | "char" | "word" | "char" | 텍스트를 쪼갤 단위(글자 또는 단어) |
| duration | number | 0.6 | 각 조각의 애니메이션 지속 시간 (초) |
| stagger | number | 0.05 | 조각 간 순차 지연 간격 (초) |
| initialDelay | number | 0 | 전체 애니메이션 시작 전 지연 (초) |
| distance | number | 24 | 아래에서 위로 상승하는 초기 이동 거리 (px) |
| easing | string | "cubic-bezier(0.22, 1, 0.36, 1)" | CSS 이징 함수 |
| color | string | "#C084FC" | 텍스트 색상 (Vivid Kit 바이올렛 기본값) |
| className | string | "" | 추가 Tailwind className |