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

위글Wiggle

Wiggle

위글

다른 이름Also known as · Wiggle Motion · 위글 움직임 · Random shake

591

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

도판Fig. 591. 위글 · Wiggle · sine.inOut

위치나 회전이 불규칙하게 이어지며 미세하게 흔들리는 움직임A continuous, irregular jitter in position or rotation.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

불안, 활력, 손으로 만든 듯한 미세한 생동감Unease, energy, or a hand-made sense of life in the smallest motion.

언제 쓰나Use whenUSE WHEN

정지 화면 요소에 살아 있는 느낌을 조금 줄 때
긴장하거나 떨리는 캐릭터·카메라 흔들림을 표현할 때

When a still element needs a little liveliness
When showing a nervous character or a camera shake

과용 주의AvoidAVOID

난수는 시드 고정 배열로만
진폭은 위치 ±20px, 회전 ±5도 이하
본문 텍스트에는 걸지 않는다

분류TagsTAGS

반복·앰비언트Loop & Ambient 분위기Mood 주목 끌기Attention 숏폼Short-form 설명 영상Explainer video 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

스티커가 2Hz로 위치 ±12px, 회전 ±3도 안에서 시드 고정 값으로 2초간 떤다

과용 · 나쁜 사례OVERUSE

Math.random으로 매 렌더가 달라지거나 진폭이 40px을 넘어 화면 밖으로 밀린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주파수	2Hz	1~4Hz	초당 목표 변경 횟수
위치 진폭	±12px	4~20px	1920x1080 기준
회전 진폭	±3deg	1~5deg	위치와 독립
길이	2.0s	1~4s	끝에서 0으로 복귀

GSAP

let s = 7; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647 * 2 - 1;
for (let i = 0; i < 4; i++) tl.to('.el', { x: rnd() * 12, y: rnd() * 12, rotation: rnd() * 3, duration: 0.5, ease: 'sine.inOut' }, 0.2 + i * 0.5);
tl.to('.el', { x: 0, y: 0, rotation: 0, duration: 0.4 }, 2.2);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>에 위글을 넣어줘. 시드 고정 난수(seed 7)로 0.2초부터 0.5초마다 x, y는 ±12px, rotation은 ±3도 안의 새 목표로 sine.inOut 이동하고, 2.2초에 0으로 복귀해. Math.random은 쓰지 마. paused 타임라인 하나에 넣어.

Add a wiggle to <target> with GSAP. Using a fixed-seed random (seed 7), from 0.2s every 0.5s move to a new target within +/-12px in x and y and +/-3 degrees rotation with sine.inOut, and return to 0 at 2.2s. No Math.random. One paused timeline.

Codex

<파일>의 <대상>에 wiggle을 적용해. LCG seed 7로 4개 목표를 만들어 x·y ±12px, rotation ±3deg, duration 0.5, position 0.2+i*0.5로 tween하고 2.2s에 0 복귀. 같은 페이지를 두 번 렌더해 1.0초 프레임이 픽셀 동일한지, 2.6초에 x=0인지 확인해.

Apply wiggle to <target> in <file>. Build 4 targets from an LCG seeded with 7, x and y within +/-12px, rotation +/-3deg, duration 0.5, position 0.2 + i*0.5, then return to 0 at 2.2s. Render twice and confirm the 1.0s frame is pixel-identical and x is 0 at 2.6s.