효과Effects / 강조·주의Emphasis / Nº 072

워블Wobble

Wobble

워블

다른 이름Also known as · 큰 좌우 비틀림

072

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

도판Fig. 072. 워블 · Wobble · power2.out

요소가 좌우로 넓게 밀리며 기울다가 진폭을 줄이며 정착하는 흔들림A wide left-right sway with tilt that shrinks in amplitude until it settles.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

불안정함, 익살, 또는 입력이 거부된 느낌. 감쇠하며 멈추는 점이 핵심이다Reads as instability, playfulness or a soft rejection. Decay to rest is the key.

언제 쓰나Use whenUSE WHEN

귀여운 캐릭터·스티커가 반응할 때
잘못된 입력이 가볍게 튕겨 나오는 순간을 보여 줄 때
가볍고 장난스러운 톤의 숏폼 강조

When a cute character or sticker reacts
When a bad input should bounce back lightly
When adding a playful emphasis in short-form video

과용 주의AvoidAVOID

진폭이 매번 60~70%로 줄어야 한다
본문·표에는 사용 금지
1.2초 안에 정지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

스티커가 x -25%→+20%→-15%→+10%→-5%→0으로 진폭을 줄이며 5도씩 기울고 정착한다

과용 · 나쁜 사례OVERUSE

진폭이 줄지 않고 같은 폭으로 계속 흔들리거나, 텍스트 본문에 적용해 읽을 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 폭	25%	10~30%	요소 너비 기준 첫 번째 진폭
회전	5deg	3~8deg	이동 방향과 반대로 기움
반동 횟수	5회	3~6회	마지막은 0
총 길이	1.0s	0.7~1.3s	감쇠 포함

GSAP

const amp = [-0.25, 0.2, -0.15, 0.1, -0.05, 0];
amp.forEach((a, i) => tl.to('.sticker', { xPercent: a * 100, rotation: -a * 20, duration: 0.17, ease: 'power2.out' }, 0.3 + i * 0.17));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>에 wobble을 넣어줘. 0.3초부터 0.17초 간격으로 xPercent가 -25, +20, -15, +10, -5, 0으로 줄어들고 rotation은 이동 반대 방향으로 진폭의 0.2배(최대 5도)로 기울어. 이징은 power2.out이고 배열은 코드에 고정해. paused 타임라인으로 만들어.

Add a wobble to <target> with GSAP. From 0.3s, every 0.17s set xPercent to -25, 20, -15, 10, -5, 0 and rotate opposite to the shift by 0.2x the amplitude (max 5 degrees). Ease power2.out, keep the array fixed in code, and use a paused timeline.

Codex

<파일>의 <대상>에 wobble을 적용해. amp 배열 [-0.25,0.2,-0.15,0.1,-0.05,0]를 forEach로 돌려 xPercent=a*100, rotation=-a*20, duration 0.17, position 0.3+i*0.17로 tween을 건다. 0.4초·0.9초·1.5초를 캡처해 진폭이 줄어드는지, 1.4초 이후 x=0인지 확인해.

Apply wobble to <target> in <file>. Loop the array [-0.25,0.2,-0.15,0.1,-0.05,0] with xPercent = a*100, rotation = -a*20, duration 0.17, position 0.3 + i*0.17. Capture at 0.4s, 0.9s and 1.5s to confirm the amplitude decays and x is 0 after 1.4s.