문맥 반응 커서Context Caret

Context Caret

문맥 반응 커서

다른 이름Also known as · Context caret · 문맥 커서 · context-sensitive-cursor

097

렌더 추가 예정CLIP COMING문맥 반응 커서Context Caret정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 097. 문맥 반응 커서 · Context Caret · steps(1)

입력 중인 구간의 성격에 따라 커서의 색이 바뀌고 깜빡임이 이어지는 텍스트 커서A text caret that changes color with the kind of text being typed, then keeps blinking.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

지금 어디를 쓰고 있는지가 커서 색만으로 읽힌다. 입력이 살아 있는 화면처럼 느껴진다The caret alone tells the viewer which segment is active, so the input feels alive.

언제 쓰나Use whenUSE WHEN

입력창에 브랜드어나 검증 결과처럼 구간별 의미가 다른 글을 타이핑할 때
AI가 답을 쓰는 화면에서 현재 초점 구간을 조용히 알려 줄 때

When typing text whose segments carry different meaning, such as a brand word or a verification result
When an AI answer streams and you want to quietly mark the active segment

과용 주의AvoidAVOID

색 전환은 즉시(0ms)로 한다. 부드럽게 바꾸면 이전 구간 색이 잔상처럼 남는다
타이핑 중에는 깜빡임을 멈추고 고정 점등한다. 깜빡이는 커서는 읽기를 방해한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"승인" 두 글자를 칠 때 커서가 초록으로 바뀌고 입력이 멈추면 0.2초 뒤 다시 흰색으로 깜빡인다

과용 · 나쁜 사례OVERUSE

구간마다 색을 6가지 이상 쓰거나 깜빡임을 0.3초 이하로 줄여 글자보다 커서가 더 눈에 띈다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
깜빡임 주기	0.9s	0.6~1.2s	켜짐 50%, 꺼짐 50%
입력 유예	0.2s	0.1~0.4s	마지막 글자 후 이 시간이 지나야 깜빡임 재개
색 전환	0ms	0ms 고정	구간 경계에서 즉시 교체
커서 두께	3px	2~4px	1920x1080, 글자 크기 48px 기준

GSAP

const caret = document.querySelector('.caret');
const seg = t => t < 1.2 ? '#fff' : t < 2.0 ? '#3ddc84' : '#fff';
function render(t){
  const typing = (t % 0.15) < 0.15 && t < 2.6;
  const blink = Math.floor((t - 2.6) / 0.45) % 2 === 0;
  caret.style.background = seg(t);
  caret.style.opacity = typing || blink ? 1 : 0;
}
tl.eventCallback('onUpdate', () => render(tl.time()));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 입력창에 문맥 반응 커서를 넣어줘. 커서 두께 3px, 깜빡임 0.9초 주기(켜짐 50%), 타이핑 중에는 고정 점등, 마지막 글자 뒤 0.2초에 깜빡임 재개. 구간 경계에서 색은 0ms로 즉시 바꾸고, 시간 t의 함수로만 그려 seek해도 같은 결과가 나오게 해.

Add a context-reactive caret to <target>. Use these settings: caret width 3px; blink period 0.9s at 50% duty; solid while typing; blinking resumes 0.2s after the last character. Switch color at segment boundaries in 0ms. Draw it as a pure function of time t so seeking gives identical results.

Codex

<파일>의 타이핑 장면에 문맥 반응 커서를 적용해. 커서 색은 t<1.2s 흰색, 1.2~2.0s 초록, 이후 흰색으로 하고 깜빡임은 0.9초 주기, 유예 0.2초로 계산한다. Math.random 없이 t의 함수만 쓰고, 0.6초·1.5초·3.0초 시점을 캡처해 색이 흰색, 초록, 깜빡임 상태로 나오는지 확인해.

Apply a context caret to the typing scene in <file>. Caret color: white for t<1.2s, green from 1.2 to 2.0s, white afterwards; blink period 0.9s with a 0.2s idle delay. No Math.random, only functions of t. Capture at 0.6s, 1.5s and 3.0s and confirm white, green, and blinking states.