텍스트 애니메이션
Typewriter Code
setInterval로 한 글자씩 부분 문자열을 렌더해 코드가 타이핑되는 효과를 만들고, steps 키프레임으로 opacity를 하드 전환하여 블록 커서가 깜빡인다.
- 분류
- 텍스트 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TypewriterCode-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | const vivid = true; | 타이핑될 코드 문자열. |
| typingSpeed | number | 60 | 한 글자당 입력 간격(ms). 작을수록 빠르게 타이핑. |
| cursorChar | string | ▋ | 깜빡이는 블록 커서 문자. |
| className | string | undefined | 루트 span에 적용할 추가 클래스. |