텍스트 애니메이션
Bounce Text
글자들이 순차로 통통 튀며 등장하는 텍스트 애니메이션. 글자별 CSS bounce 키프레임과 stagger 지연으로 순차 바운스를 만들고, 탄성 이징으로 여러 번 작아지며 튀어 정착한다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/BounceText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | 통통 튀며 등장할 텍스트. | |
| duration | number | 0.6 | 글자 1개의 튀는 애니메이션 지속(초). 작을수록 빠르게 튐. |
| staggerPerChar | number | 0.08 | 글자당 시작 지연(초). 값이 클수록 순차 등장 간격이 벌어짐. |
| bounceHeight | number | 24 | 튀어오르는 높이(px). 클수록 크게 튐. |
| loop | boolean | true | 전체 사이클을 반복할지 여부. 마지막 글자 등장 후 재시작. |
| loopDelay | number | 1.2 | loop 시 사이클 사이 대기(초). |
| colorFrom | string | #C084FC | 그라디언트 시작 색(앞쪽 글자 계열). |
| colorTo | string | #EC4899 | 그라디언트 끝 색(뒤쪽 글자 계열). |
| className | string | undefined | 래퍼 span에 적용할 추가 클래스(폰트 크기/굵기 등). |