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

젤로Jello

Jello

젤로

다른 이름Also known as · 젤리 전단 진동 · Text Elastic Skew · 텍스트 탄성 비틀림

068

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

도판Fig. 068. 젤로 · Jello · sine.inOut

가로와 세로로 번갈아 비틀리며 감쇠하는 젤리 같은 진동A damped alternating shear that makes an element wobble like jelly.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

부드럽고 말랑한 물성. 눌렀을 때 탄성 있게 반응한다는 느낌A soft, squishy material that responds elastically when touched.

언제 쓰나Use whenUSE WHEN

젤리·말랑한 캐릭터·소프트 UI 카드를 눌렀을 때
브랜드 톤이 장난스러운 앱 소개 영상

When a jelly-like character or soft UI card is pressed
In app intro videos with a playful brand tone

과용 주의AvoidAVOID

skew 15도 초과 금지
텍스트가 많은 카드에는 약하게(6도 이하)
1초 안에 정지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드를 누르면 skewX 12deg, -6deg, 3deg, 0 순서로 0.9초 안에 감쇠하며 멈춘다

과용 · 나쁜 사례OVERUSE

skew 25도 이상으로 글자가 찌그러지거나, 진동이 감쇠 없이 계속된다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
skew 진폭	12deg	6~15deg	첫 번째 최대 각
감쇠비	0.5배	0.4~0.6	매 왕복 진폭 곱
단계 수	5	4~6	마지막은 0
총 길이	0.9s	0.6~1.1s	감쇠 포함

GSAP

const k = [12, -6, 3, -1.5, 0];
k.forEach((a, i) => tl.to('.card', { skewX: a, skewY: -a / 2, duration: 0.18, ease: 'sine.inOut' }, 0.3 + i * 0.18));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 카드에 젤로 효과를 넣어줘. 0.3초부터 0.18초 간격으로 skewX가 12, -6, 3, -1.5, 0도가 되고 skewY는 그 값의 -0.5배야. 이징은 sine.inOut, 총 0.9초 안에 정지. 글자가 있으면 진폭을 6도로 낮춰. paused 타임라인 하나로 만들어.

Add a jello to the <target> card with GSAP. From 0.3s, every 0.18s set skewX to 12, -6, 3, -1.5, 0 degrees with skewY at -0.5x of that. Ease sine.inOut and stop within 0.9s. Drop the amplitude to 6 degrees if the card has text. One paused timeline.

Codex

<파일>의 <대상>에 jello를 적용해. k=[12,-6,3,-1.5,0]를 순회해 skewX=a, skewY=-a/2, duration 0.18, position 0.3+i*0.18로 tween. 0.4초·0.7초·1.3초를 캡처해 비틀림 방향이 번갈아 바뀌고 1.3초에 skew 0인지 확인해.

Apply jello to <target> in <file>. Loop k=[12,-6,3,-1.5,0] with skewX=a, skewY=-a/2, duration 0.18, position 0.3 + i*0.18. Capture at 0.4s, 0.7s and 1.3s to check the shear alternates direction and skew is 0 at 1.3s.