타이핑 입력Typing Input

Typing Input

타이핑 입력

다른 이름Also known as · 입력 시뮬레이션 · Typing input · 입력 시연 · 입력창 타이핑 · Keyboard Press Demo · 키보드 입력 시연 · Typing input simulation · Backspace retype

317

도판Fig. 317. 타이핑 입력 · Typing Input · none

재생 속도Speed

질문이 글자마다 불규칙한 간격으로 입력되고 끝의 캐럿이 깜빡이는 동작An animation in which a question is typed character by character at irregular intervals with a blinking caret at the end.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

사람이 질문을 입력하는 속도와 입력 위치Shows the pace of a person typing a question and the current insertion point.

언제 쓰나Use whenUSE WHEN

다음 말은 어떻게 고르나요?가 0.38~1.91초에 입력되고 캐럿이 끝으로 따라간다
사람이 질문을 입력하는 속도와 입력 위치을 보여 줄 때

When typing "How do you pick the next word?" from 0.38 to 1.91 seconds with a caret following the end
When showing the pace of a person typing a question and the insertion point

과용 주의AvoidAVOID

모든 글자가 같은 간격으로 나와 기계적인 입력처럼 보인다
동작 종료 뒤 최소 0.5초 읽기 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 설명Explain 피드백Feedback 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

다음 말은 어떻게 고르나요?가 0.38~1.91초에 입력되고 캐럿이 끝으로 따라간다

과용 · 나쁜 사례OVERUSE

모든 글자가 같은 간격으로 나와 기계적인 입력처럼 보인다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
입력 시작	0.38s	0.3~0.5s	첫 글자 노출 시각
글자 간격	0.07~0.17s	0.05~0.2s	고정 배열로 불규칙성을 재현
캐럿 반주기	0.24s	0.2~0.4s	타임라인 set으로 깜빡임
입력 완료	1.91s	1.7~2.3s	마지막 0.6초는 정지

GSAP

const tl = Motion.timeline();
const chars=Array.from('다음 말은 어떻게 고르나요?');
document.querySelector('#text').innerHTML=chars.map(c=>`<span class="char">${c===' '?'&nbsp;':c}</span>`).join('');
const gaps=[.08,.11,.07,.14,.09,.12,.17,.08,.1,.07,.15,.09,.11,.13,.1,.08];
let at=.3;
document.querySelectorAll('.char').forEach((el,i)=>{at+=gaps[i];tl.set(el,{display:'inline'},at);});
[.24,.48,.72,.96,1.2,1.44,1.68,1.92,2.16,2.4].forEach((t,i)=>tl.set('.caret',{opacity:i%2?1:0},t));
tl.set('.caret',{opacity:1},2.4);
tl.to('.lead',{opacity:1,duration:.2},2.2);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 입력창에 다음 말은 어떻게 고르나요?를 0.3초 뒤부터 글자 span으로 표시해줘. 간격은 [0.08,0.11,0.07,0.14,0.09,0.12,0.17,0.08,0.10,0.07,0.15,0.09,0.11,0.13,0.10]초로 고정하고 캐럿은 0.24초마다 깜빡여. 2.4초부터 캐럿을 켜고 3초까지 완성 문장을 유지해.

Reveal "How do you pick the next word?" in the <target> input field using character spans starting after 0.3 seconds. Fix the intervals at [0.08,0.11,0.07,0.14,0.09,0.12,0.17,0.08,0.10,0.07,0.15,0.09,0.11,0.13,0.10] seconds and blink the caret every 0.24 seconds. From 2.4 seconds, keep the caret visible and hold the completed sentence until 3 seconds.

Codex

<파일>의 채팅 입력 장면에서 질문 문자열을 글자 span으로 쪼개고 GSAP set으로 표시해. 0.3초를 기준으로 고정 간격 배열 0.07~0.17초를 누적해 1.91초에 입력을 마치고 캐럿은 0.24초마다 opacity를 바꿔. 0.23초, 0.73초, 1.73초, 2.9초 캡처에서 빈 입력창, 부분 입력, 마지막 입력, 완성 홀드를 확인해.

In the chat input scene in <file>, split the question string into character spans and reveal them using GSAP set. Starting from 0.3 seconds, accumulate the fixed interval array of 0.07 to 0.17 seconds to finish typing at 1.91 seconds, and toggle the caret opacity every 0.24 seconds. Capture at 0.23, 0.73, 1.73, and 2.9 seconds to check the empty field, partial input, final typing, and completed hold.