효과Effects / 반복·앰비언트Loop & Ambient / Nº 590

스트로크 체이스Stroke Chase

Stroke Chase

스트로크 체이스

다른 이름Also known as · Stroke loader · 선 그리기 로더 · Traveling Stroke Segment · 이동 선분 · Trim Paths chase · Vegas Running Lights · 윤곽 추적 조명 · Vegas effect · Animated perimeter · 움직이는 컬러 둘레 · AnimatedBoundary

590

렌더 추가 예정CLIP COMING스트로크 체이스Stroke Chase정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 590. 스트로크 체이스 · Stroke Chase · none

짧은 선분이나 밝은 점이 대상의 윤곽을 따라 반복해서 돈다.A short illuminated segment travels around an outline.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작업이 진행 중인 상태를 유지한다.Maintains a visible working state.

언제 쓰나Use whenUSE WHEN

패널 둘레에 처리 상태를 표시할 때
로고 윤곽을 반복 추적할 때

Use when presenting stroke chase in a waiting or ambient scene.
Use for a compact status indicator with a stable surrounding layout.

과용 주의AvoidAVOID

정량 완료율을 추적선 길이로 오해하게 한다.
정보를 읽는 동안 반복 진폭을 키우지 않는다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

밝은 선분이 1.8초에 버튼 둘레를 한 바퀴 돈다.

과용 · 나쁜 사례OVERUSE

정량 완료율을 추적선 길이로 오해하게 한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1.8s	1.26~2.52s	유한 구간을 호스트 시간으로 반복
표시 길이	18%	10~25%	전체 경로 대비 밝은 구간
선폭	3px	2~5px	윤곽 가독성
이징	none	none	움직임의 가속과 감속

GSAP

const path = document.querySelector('.chase');
const length = path.getTotalLength();
gsap.set(path, {strokeDasharray:`${length*0.18} ${length*0.82}`, strokeWidth:3});
tl.fromTo(path, {strokeDashoffset:0}, {strokeDashoffset:-length, duration:1.8, ease:'none'}, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 스트로크 체이스을 적용해. 1.8초, 표시 길이 18%; 선폭 3px, 이징 none로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Stroke Chase to <target> in <file>. Use a 1.8s segment with none; implement these explicit settings: Visible path segment: 18%, Stroke width: 3px. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 스트로크 체이스을 적용해. 1.8초, 표시 길이 18%; 선폭 3px, none를 사용하고 0초, 0.9초, 1.8초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Stroke Chase to the <target> layer in <file> with Visible path segment: 18%, Stroke width: 3px, using the supplied core snippet and a 1.8s segment with none. Capture at 0s, 0.9s, and 1.8s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.