힌지 개폐Hinged Oscillation

Hinged Oscillation

힌지 개폐

다른 이름Also known as · 맞물린 부품 왕복

421

렌더 추가 예정CLIP COMING힌지 개폐Hinged Oscillation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 421. 힌지 개폐 · Hinged Oscillation · sine.inOut

가위나 날개처럼 두 부품이 같은 축에서 서로 반대 각도로 열리고 닫히는 반복Two parts, like scissors or wings, open and close in opposite directions around the same pivot.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

아이콘이 어떻게 작동하는지 구조로 이해하게 한다. 대칭 움직임이라 안정적이고 리듬이 있다Lets the viewer understand how the icon works by its structure. The symmetry feels stable and rhythmic.

언제 쓰나Use whenUSE WHEN

가위, 집게, 날개 아이콘이 기능을 보여 줄 때
로딩이나 대기 상태를 조용히 표시할 때
도구의 동작 원리를 설명 장면에서 시연할 때

A scissors, pliers or wing icon showing its function.
A quiet idle or waiting state.
Demonstrate how a tool operates in an explainer.

과용 주의AvoidAVOID

두 부품은 반드시 같은 피벗 좌표를 쓴다
각도는 ±25도 이하로 유지한다
반복은 2~3회 이내로 하고 마지막은 닫힌 상태로 끝낸다

분류TagsTAGS

도형·패스Shape & Path 설명Explain 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

가위 아이콘의 두 날이 같은 피벗에서 ±15도로 1.8초 주기로 두 번 열리고 닫힌다

과용 · 나쁜 사례OVERUSE

두 부품의 피벗이 달라 서로 겹쳐 어긋나거나, 각도가 커서 아이콘 형태가 무너진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
각도	±15deg	±8~25deg	서로 반대 부호
주기	1.8s	1.2~2.6s	열림과 닫힘 합산
반복	2회	2~3회	마지막은 닫힘
이징	sine.inOut	sine 계열	부드러운 왕복

GSAP

gsap.set(['.blade-a', '.blade-b'], { transformOrigin: '50% 60%' }); // 같은 피벗
tl.to('.blade-a', { rotation: -15, duration: 0.9, ease: 'sine.inOut', yoyo: true, repeat: 3 }, 0.3)
  .to('.blade-b', { rotation: 15, duration: 0.9, ease: 'sine.inOut', yoyo: true, repeat: 3 }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <SVG 아이콘>의 두 부품이 같은 피벗에서 반대 방향으로 열리고 닫히게 해줘. 한쪽은 -15도, 다른 쪽은 +15도로 0.9초 sine.inOut, yoyo로 총 2회 반복(주기 1.8초), 0.3초에 시작해. 두 부품은 동일한 transform-origin을 쓰고 마지막은 닫힌 상태로 끝나야 해.

Use GSAP so the two parts of <SVG icon> open and close in opposite directions around the same pivot. One part rotates -15 degrees, the other +15, each 0.9 seconds with sine.inOut and yoyo, twice in total (1.8 second period), starting at 0.3 seconds. Both use the same transform-origin and the icon ends closed.

Codex

<파일>의 아이콘에 hinged-oscillation을 적용해. .blade-a rotation -15, .blade-b rotation 15, duration 0.9, ease sine.inOut, yoyo true, repeat 3을 position 0.3에 건다. 두 부품 transformOrigin이 동일한지 확인하고 0.3초는 닫힘, 1.2초는 최대 개방, 3.9초는 닫힘 상태인지 캡처로 확인해.

Apply hinged-oscillation to the icon in <file>. Tween .blade-a rotation -15 and .blade-b rotation 15, duration 0.9, ease sine.inOut, yoyo true, repeat 3 at position 0.3. Verify identical transformOrigin, then capture 0.3s (closed), 1.2s (fully open) and 3.9s (closed).