효과Effects / 원리 도해Explainer / Nº 387

경로 신호 빔Path Beam

Path Beam

경로 신호 빔

다른 이름Also known as · Tracing beam · 경로 추적 광선 · Animated Path Beam · 경로 빛 이동 · Animated Beam · 움직이는 빔 · Beam effect

387

렌더 추가 예정CLIP COMING경로 신호 빔Path Beam정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 387. 경로 신호 빔 · Path Beam · none

빛나는 짧은 선이 연결 경로를 따라 지나가며 각 대상이 차례로 밝아진다.A short luminous segment travels along a connector toward an active node.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

처리 경로와 활성 단계를 보여준다.Shows signal direction and the currently active stage.

언제 쓰나Use whenUSE WHEN

요청 신호가 API 연결선을 따라 지나간 뒤 응답 노드를 켠다.
처리 경로와 활성 단계를 보여준다. 기준값과 대상을 함께 표시할 때.

Highlight a processing path.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

선택 경로 한 개부터 보여준다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 제품 시연Product demo 스크롤덱Scroll deck 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

요청 신호가 API 연결선을 따라 지나간 뒤 응답 노드를 켠다.

과용 · 나쁜 사례OVERUSE

모든 경로에 동시에 빔을 반복해 현재 경로를 가린다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 지속	1500ms	900~2400ms	경로 길이 기준
빔 길이	80px	40~140px	전체 경로보다 짧게
도착 강조	300ms	150~500ms	처리 완료와 동기화

GSAP

const tl=gsap.timeline({paused:true}),L=beam.getTotalLength();
gsap.set(beam,{strokeDasharray:`80 ${L+80}`,strokeDashoffset:80});
tl.to(beam,{strokeDashoffset:-L,duration:1.5,ease:'none'},0);
tl.to('.destination',{opacity:1,duration:0.3},1.5);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 경로 신호 빔을 적용해. SVG dash의 위치를 진행시키고 도착 시점에 대상 색을 강조한다. 이동 지속 1500ms; 빔 길이 80px; 도착 강조 300ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 경로 신호 빔을 적용해. SVG dash의 위치를 진행시키고 도착 시점에 대상 색을 강조한다. 이동 지속 1500ms; 빔 길이 80px; 도착 강조 300ms을 적용한다. 0초, 0.75초, 1.5초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Path Beam on <target> in <file>. Move an 80px beam along the path over 1500ms, then brighten the destination over 300ms. Hide the beam outside the path endpoints. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.75s, and 1.5s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.