텍스트 애니메이션
Word Ticker
고정 문구 뒤의 단어가 위로 슬라이드되며 순환 교체되는 텍스트 애니메이션. 현재 단어는 위로 빠져나가고 다음 단어가 아래에서 올라오는 2-레이어 방식으로, setInterval 순환과 CSS transition을 결합했다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/WordTicker-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| words | string[] | — | 순환 교체될 단어 목록 (필수). |
| interval | number | 2000 | 각 단어가 유지되는 시간(ms). |
| transitionDuration | number | 500 | 위로 슬라이드되는 전환 지속 시간(ms). |
| color | string | #C084FC | 회전 단어의 색상. 기본값은 Vivid Kit 바이올렛. |
| prefix | string | undefined | 회전 단어 앞에 붙는 고정 문구(선택). |
| className | string | undefined | 래퍼에 적용할 추가 클래스. |