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

누적 오프셋 루프Offset Loop

Offset Loop

누적 오프셋 루프

다른 이름Also known as · loopOut offset

612

렌더 추가 예정CLIP COMING누적 오프셋 루프Offset Loop정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 612. 누적 오프셋 루프 · Offset Loop · none

같은 동작이 반복될 때마다 마지막 변위가 더해져 계속 전진한다.Each repetition adds its final displacement and continues forward.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

끝없는 이동과 누적을 표현한다.Communicates accumulation and ongoing travel.

언제 쓰나Use whenUSE WHEN

변위가 누적됨을 설명할 때
반복 생산이나 단계 상승을 표현할 때

Explain cumulative displacement.
Represent repeated production or rising stages.

과용 주의AvoidAVOID

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

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

물체가 매초 80px씩 더 이동해 누적 진행을 보여 준다.

과용 · 나쁜 사례OVERUSE

화면 경계를 넘는 이동을 무한 반복해 대상이 사라진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
단계 지속	1s	0.6~2s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
단계 변위	80px	40~120px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
단계 수	4	2~8	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
이징	none	none 또는 power1.inOut	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const tl = gsap.timeline({ paused: true });
for (let i = 0; i < 4; i++) {
  tl.fromTo('.item', { x: i * 80 },
    { x: (i + 1) * 80, duration: 1, ease: 'none', immediateRender: false }, i);
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 누적 오프셋 루프을 구현해. 단계 지속 1s, 단계 변위 80px, 단계 수 4, 이징 none, 이징 none을 적용해. 주기 번호의 누적 변위에 주기 내부 보간값을 더한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Offset Loop on <target>. Use step duration 1s; step displacement 80px; step count 4; easing none; 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

<파일>의 누적 오프셋 루프 장면 레이어에 적용해. 단계 지속 1s, 단계 변위 80px, 단계 수 4, 이징 none, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Offset Loop to the scene layer in <file>. Use step duration 1s; step displacement 80px; step count 4; easing none 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.