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

경로 컨베이어Path Conveyor

Path Conveyor

경로 컨베이어

다른 이름Also known as · Conveyor and Maze Loader · 컨베이어와 경로 로더 · Text Path Conveyor · 경로 위 텍스트 이동

614

렌더 추가 예정CLIP COMING경로 컨베이어Path Conveyor정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 614. 경로 컨베이어 · Path Conveyor · linear

작은 객체가 컨베이어나 미로 경로를 따라 반복 이동한다.Small objects travel repeatedly along a conveyor-like route.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

단계 처리와 생산 흐름을 보여 준다.Shows staged processing and production flow.

언제 쓰나Use whenUSE WHEN

작업 큐 설명에서 지속 활동을 표시할 때
짧은 반복으로 단계 처리와 생산 흐름을 보여 준다 때

Explain a repeating production queue with objects on a shared route.
Use a short repeating motion to communicate shows staged processing and production flow.

과용 주의AvoidAVOID

경로가 교차하는 곳에서 객체가 겹쳐 처리 순서를 읽을 수 없다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

작업 큐 설명에서 객체들이 300ms 간격으로 120px 폐곡선을 따라 움직인다

과용 · 나쁜 사례OVERUSE

경로가 교차하는 곳에서 객체가 겹쳐 처리 순서를 읽을 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2400ms	1800~3600ms	한 번의 반복에 걸리는 시간이다
객체 시간차	300ms	200~400ms	같은 경로에서 객체의 간격을 만든다
경로 길이	120px	80~240px	단순한 폐곡선을 사용한다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx .item { offset-path:path("M0 0 H40 V20 H0 Z"); offset-rotate:0deg; animation:conveyor 2.4s linear infinite; animation-delay:calc(var(--i)*-300ms); }
@keyframes conveyor {
  from { offset-distance:0%; }
  to { offset-distance:100%; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 경로 컨베이어를 적용해. 주기 2400ms, 객체 시간차 300ms, 경로 길이 120px, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Path Conveyor to <target>. Use a 2.4-second cycle, a closed 120px route with 300ms object offsets, and linear easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 경로 컨베이어를 적용해. 주기 2400ms, 객체 시간차 300ms, 경로 길이 120px, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1.2초, 2.4초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Path Conveyor in the waiting indicator or background region of <file>. Use a 2.4-second cycle, a closed 120px route with 300ms object offsets, and linear easing; derive loop phase from absolute time. Capture at 0, 1.2, and 2.4 seconds to verify the intermediate change and the return to the starting frame.