효과Effects / 등장·퇴장Entrance & Exit / Nº 043

힌지 드롭Hinge Drop

Hinge Drop

힌지 드롭

다른 이름Also known as · 경첩 매달림 낙하 · Text Hinge Drop · 텍스트 경첩 낙하

043

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

도판Fig. 043. 힌지 드롭 · Hinge Drop · cubic-bezier(0.22, 1, 0.36, 1)

요소가 모서리에 매달려 흔들리다가 아래로 떨어져 사라진다.An element swings from a corner, then drops out of view.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

실패나 제거를 익살스럽게 알린다.Gives failure or removal a comic tone.

언제 쓰나Use whenUSE WHEN

가벼운 게임 실패를 표현할 때
장면의 주인공 한 요소에 시선을 모을 때

Express a lighthearted game failure.
Focus attention on one main element in a scene.

과용 주의AvoidAVOID

결제 실패 같은 중요한 오류에는 쓰지 않는다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 전환Transition 주목 끌기Attention 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

게임 배지가 좌상단에 매달려 흔들린 뒤 아래로 떨어진다.

과용 · 나쁜 사례OVERUSE

여러 요소에 동시에 적용해 읽을 위치와 시선을 계속 바꾸게 만든다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	1600ms	1120~2240ms	한 번의 동작 기준
최대 회전	70deg	45~75deg	좌상단 기준점
낙하 거리	700px	500~1100px	마지막 15%에 낙하
흔들림	3회	2~3회	고정 키프레임

GSAP

.effect { animation: effect 1600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.effect { transform-origin: 0 0; }
@keyframes effect {
  0%{transform:rotate(0)} 20%,50%,75%{transform:rotate(70deg)} 35%,65%,85%{transform:rotate(50deg);opacity:1} 100%{transform:translateY(700px) rotate(70deg);opacity:0}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 힌지 드롭을 적용해. 지속 1600ms, 최대 회전 70deg, 낙하 거리 700px, 흔들림 3회, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Hinge Drop to <target> in <file>. Implement the provided keyframes with 1600ms duration, maximum rotation 70deg, drop distance 700px, swings 3, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 힌지 드롭 키프레임을 추가해. 지속 1600ms, 최대 회전 70deg, 낙하 거리 700px, 흔들림 3회, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.8초·1.6초 시점을 캡처해 시작 상태, 중간 변화, 최종 퇴장를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Hinge Drop keyframes to the styles for <target> in <file> using 1600ms duration, maximum rotation 70deg, drop distance 700px, swings 3, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.8, and 1.6 seconds to verify the initial state, intermediate motion, and disappearance. Use fixed keyframes and verify reduced-motion behavior.