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

위글 루프Wiggle Loop

Wiggle Loop

위글 루프

다른 이름Also known as · Seamless Wiggle Loop · 끊김 없는 위글 루프

621

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

도판Fig. 621. 위글 루프 · Wiggle Loop · none

불규칙한 흔들림이 끝에서 처음으로 자연스럽게 이어진다.An irregular wobble reconnects smoothly at the loop boundary.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

반복 배경에 생동감을 준다.Adds organic life to repeated motion.

언제 쓰나Use whenUSE WHEN

손그림 요소에 생기를 줄 때
짧은 배경 흔들림을 반복할 때

Bring hand-drawn elements to life.
Repeat a subtle background wobble.

과용 주의AvoidAVOID

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

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

손그림 아이콘이 8px 안에서 불규칙하게 흔들리고 원위치로 이어진다.

과용 · 나쁜 사례OVERUSE

본문 전체를 흔들어 읽기와 집중을 방해한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	3s	2~6s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
주요 진동수	1Hz	0.3~2Hz	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
위치 진폭	8px	3~12px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
회전 진폭	2deg	0~4deg	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const state = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(state, { t: 3, duration: 3, ease: 'none', onUpdate: () => {
  const a = state.t * Math.PI * 2 / 3;
  gsap.set('.wiggle', { x: 5 * Math.sin(3*a) + 3 * Math.sin(5*a), rotation: 2 * Math.sin(2*a) });
} });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 위글 루프을 구현해. 주기 3s, 주요 진동수 1Hz, 위치 진폭 8px, 회전 진폭 2deg, 이징 none을 적용해. 서로 한 주기 떨어진 노이즈 샘플을 교차 보간한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Wiggle Loop on <target>. Use period 3s; main frequency 1Hz; position amplitude 8px; rotation amplitude 2deg; 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

<파일>의 위글 루프 장면 레이어에 적용해. 주기 3s, 주요 진동수 1Hz, 위치 진폭 8px, 회전 진폭 2deg, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Wiggle Loop to the scene layer in <file>. Use period 3s; main frequency 1Hz; position amplitude 8px; rotation amplitude 2deg 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.