텍스트 애니메이션
Typewriter Cycle
한 글자씩 타이핑되고 커서가 깜빡이는 타이프라이터 효과. 여러 문장을 순차로 타이핑·삭제하며 순환할 수 있습니다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TypewriterCycle-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | string[] | — | 타이핑할 문장. 배열이면 순차 순환한다. |
| typingSpeed | number | 90 | 글자 추가 간격(ms). |
| deletingSpeed | number | 45 | 글자 삭제 간격(ms). |
| pauseDuration | number | 1400 | 문장 완성 후 삭제 전 대기(ms). |
| cursorBlinkSpeed | number | 530 | 커서 깜빡임 주기(ms). |
| cursorChar | string | "|" | 커서로 표시할 문자. |
| cursorColor | string | "#C084FC" | 커서 색상(기본: 바이올렛). |
| loop | boolean | true | 문장 순환 여부. false면 마지막 문장에서 멈춘다. |
| className | string | undefined | 래퍼에 적용할 CSS 클래스. |