효과Effects / UI 시연UI Demo / Nº 330

커서 트레일Cursor Trail

Cursor Trail

커서 트레일

다른 이름Also known as · Cursor trail · 커서 이동 흔적 · 커서 잔상

330

렌더 추가 예정CLIP COMING커서 트레일Cursor Trail정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 330. 커서 트레일 · Cursor Trail · none

커서가 지나간 자리에 점, 이미지 또는 경로선이 남았다가 점차 사라진다.A fading trail records the cursor path.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작업 순서와 이동 경로를 복기하게 한다.Reveals movement direction and the order of operations.

언제 쓰나Use whenUSE WHEN

조작 경로를 복기할 때
복잡한 화면의 이동 순서를 설명할 때

Review an interaction path.
Explain movement order in a complex interface.

과용 주의AvoidAVOID

흔적을 1초 이상 누적하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

커서 뒤에 12px 간격의 점이 남고 500ms 안에 사라진다

과용 · 나쁜 사례OVERUSE

잔상이 본문 위에 쌓여 글자를 읽을 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
점 간격	12px	8~24px	경로 길이 기준
이동	800ms	500~1200ms	360px 경로
감쇠	500ms	250~700ms	점별 유지 시간
점 지름	6px	4~10px	본문을 가리지 않는 크기

GSAP

const dots = gsap.utils.toArray('.trail-dot');
gsap.set(dots, {opacity:0});
dots.forEach((dot,i) => {
  tl.set(dot,{opacity:0.6},i*0.8/Math.max(1,dots.length-1));
  tl.to(dot,{opacity:0,duration:0.5,ease:'none'},i*0.8/Math.max(1,dots.length-1));
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 커서 트레일을 적용한다. SVG 경로를 12px 간격으로 샘플링해 점을 미리 놓고 800ms 이동과 500ms 감쇠를 연결한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Cursor Trail to <target> in <file>. Preplace SVG dots at 12px path intervals and coordinate an 800ms cursor movement with a 500ms fade. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 커서 트레일 장면에 적용한다. SVG 경로를 12px 간격으로 샘플링해 점을 미리 놓고 800ms 이동과 500ms 감쇠를 연결한다. 0.33초·0.85초·1.50초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Cursor Trail in the scene for <target> in <file>. Preplace SVG dots at 12px path intervals and coordinate an 800ms cursor movement with a 500ms fade. Capture at 0.33s, 0.85s, 1.50s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인에 커서 트레일의 초기 상태와 종료 상태를 함께 기록하고 1.30초까지 seek로 재현한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 커서 트레일 대상 선택자와 점 간격 12px, 이동 800ms, 감쇠 500ms를 싣고 최종 상태 유지 시간을 지정한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 1.30초 구간에 매핑하고 선형 관계는 none으로 유지한다.

잘 맞는 조합Pairs well with

Nº 315커서 이동과 클릭Cursor Move & ClickCursor Move & Click

Nº 244선 그리기Line DrawLine Draw

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo