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

행진 점선Marching Ants

Marching Ants

행진 점선

다른 이름Also known as · Animated Dashes · 움직이는 점선

609

렌더 추가 예정CLIP COMING행진 점선Marching Ants정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 609. 행진 점선 · Marching Ants · none

점선의 간격과 위상이 바뀌어 윤곽을 따라 흐른다.Dashes travel along an outline as their phase advances.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

이동 방향이나 연결 흐름을 표시한다.Indicates direction or a selected boundary.

언제 쓰나Use whenUSE WHEN

연결 방향을 표시할 때
선택 영역의 경계를 유지할 때

Show the direction of a connection.
Keep a selection boundary visible.

과용 주의AvoidAVOID

본문과 겹치는 영역의 대비를 낮춘다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 분위기Mood 브랜딩Branding 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

데이터 경로의 점선 위상이 14px 이동해 흐름 방향을 알린다.

과용 · 나쁜 사례OVERUSE

양방향 연결에 한쪽으로 흐르는 점선을 써 의미가 바뀐다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1.2s	0.8~2s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
대시 길이	8px	4~12px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
간격	6px	4~10px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
선 두께	2px	1~3px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const tl = gsap.timeline({ paused: true });
gsap.set('.ants', { strokeDasharray: '8 6', strokeWidth: 2 });
tl.fromTo('.ants', { strokeDashoffset: 0 },
  { strokeDashoffset: -14, duration: 1.2, ease: 'none' });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 행진 점선을 구현해. 주기 1.2s, 대시 길이 8px, 간격 6px, 선 두께 2px, 이징 none을 적용해. SVG stroke-dasharray와 stroke-dashoffset을 갱신한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Marching Ants on <target>. Use period 1.2s; dash length 8px; gap 6px; stroke width 2px; use none easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 행진 점선 장면 레이어에 적용해. 주기 1.2s, 대시 길이 8px, 간격 6px, 선 두께 2px, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Marching Ants to the scene layer in <file>. Use period 1.2s; dash length 8px; gap 6px; stroke width 2px and none easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.