Typewriter

한 글자씩 등장하는 텍스트 + 깜빡이는 커서. 1회 또는 무한 루프 모드, 크기·색·굵기·커서를 자유롭게 커스터마이즈.

라이브 미리보기

텍스트모드

글자 크기 (20px)굵기 (600)색상

커서 글자 (비우면 막대)

1회 타이핑 (기본)

무한 루프

컬러 그라데이션 톤

언더스코어 커서 (터미널)

블록 커서 + 큰 글자

커서 숨김

사용

import { Typewriter } from '@baneung-pack/effect';

// 1회 타이핑 (기본)
<Typewriter text="Hello, world!" />

// 무한 루프 + 크기/색 커스터마이즈
<Typewriter
  text="함께 만들 프로젝트가 있으신가요?"
  loop
  fontSize={24}
  color="#1F2937"
  fontWeight={600}
  pauseAfterTypeMs={3000}
/>

// 터미널 스타일 (언더스코어 커서)
<Typewriter
  text="$ npm install"
  loop
  cursorChar="_"
  cursorColor="#16A34A"
/>

API

TypewriterProps

Property	Type	기본값	설명
text	string	—	표시할 텍스트 (필수). 변경 시 처음부터 다시 타이핑.
loop	boolean	false	true면 type → pause → erase → pause 무한 반복.
speedMs	number	50	타이핑 속도 (ms/char).
eraseSpeedMs	number	24	지우는 속도 (ms/char). loop=true 시.
pauseAfterTypeMs	number	3000	다 친 뒤 지우기 시작까지 대기 (ms).
pauseAfterEraseMs	number	450	다 지운 뒤 다시 타이핑까지 대기 (ms).
resetKey	number \| string	—	값이 바뀌면 외부 트리거로 처음부터 재시작.
fontSize	string \| number	—	폰트 크기. number는 px로 해석.
fontWeight	CSSProperties['fontWeight']	—	폰트 굵기.
color	string	—	텍스트 색 (CSS color).
showCursor	boolean	true	커서 표시 여부.
cursorColor	string	currentColor	커서 색 — 미지정 시 텍스트 색.
cursorWidth	number	2	막대 커서 두께 (px).
cursorChar	string	—	커서 글자 (미지정 시 막대 형태).
className	string	—	추가 클래스 (Tailwind 등).
style	CSSProperties	—	인라인 style (fontSize/color/fontWeight보다 우선).