여러 문구를 한 글자씩 입력하고, 멈췄다 지우고 다음 문구로 넘어가는 타이핑 효과.
타이핑대기삭제 3단계 상태를 단일 setTimeout 재귀 체인으로 잇고, 다음 글자까지의 delay만 단계별로 계산합니다.
히어로 카피검색창 placeholder봇 메시지처럼 여러 메시지를 순서대로 보여주고 싶을 때. 정적 문구보다 주목도가 높습니다.
현재 문구단계인덱스를 ref(최신값)로 들고, tick이 단계에 따라 한 글자 추가삭제 후 다음 tick을 예약.
다 치면 잠깐 대기 삭제(더 빠른 속도) 비면 다음 문구로 순환.
커서는 steps(1) 키프레임으로 깜빡입니다.
변하는 상태를 effect deps에 넣으면 타이머가 중복 생성됨 ref 최신값 + [playing]만 재가동 트리거.
삭제 속도를 타이핑보다 빠르게 해야 자연스러움.
prefers-reduced-motion이면 애니메이션 없이 전체 문구를 표시.
랜딩 히어로 헤드라인
챗봇/터미널 UI 연출
import type { Metadata } from "next";
import { TypewriterDemo } from "./-components/TypewriterDemo";
export const metadata: Metadata = {
title: "타이핑 효과 (타이프라이터) (데모)",
description:
"여러 문구를 한 글자씩 치고 지우며 순환하는 타이프라이터 효과. 타이핑/대기/삭제 3단계 상태 머신 + 깜빡이는 커서, 속도 조절·정지, prefers-reduced-motion 시 전체 텍스트 즉시 표시.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40">
<TypewriterDemo />
</main>
);
}