그림자

최근 좌표 여섯 개만 있으면 0.5초 뒤를 거의 맞힐 수 있다. 그림자가 먼저 도착해 있는 이유.

구현

• 포인터 좌표 원형 버퍼 60개, 최근 6개로 속도 벡터 계산

  const vx = (last.x - first.x) / dt
  const vy = (last.y - first.y) / dt
  predict = { x: last.x + vx * 500, y: last.y + vy * 500 }

• 커서: lerp 0.35로 부드럽게 추적
• 그림자:
  • following — predX/predY 쪽으로 lerp 0.14
  • idle (1s 정지) — 실제 커서로 lerp 0.04 + Math.sin(t*2.1) + Math.sin(t*3.7)*0.7 jitter (Perlin 유사)
  • startled — 그림자-커서 오차가 60px 초과 순간 80ms 정지 + blur(0.6px) · 쿨다운 480ms

모바일 분기

• pointerType === "touch" 감지 → lerp 0.22 · PREDICT 320ms · STARTLE threshold 80px
• setPointerCapture로 드래그 이탈 안정화
• touch-action: none + tap hit area 44px+
• 터치 시 cursor 자동 표시 + 대형 인디케이터