힌지 리빌Hinge Reveal
패널이 한쪽 변을 축으로 기울어진 상태에서 정면으로 열린다.A panel rotates from its edge into a front-facing position.
무엇을 전하나What it tells
- 닫힌 정보 패널을 열 때
- 카드가 문처럼 등장할 때
- Use when presenting hinge reveal in a content reveal scene.
- Use for a focused title, image, or card with a clearly visible final state.
- 원근 없이 회전해 패널이 폭만 줄어든다.
- 완료 자세에서 내용이 가려지지 않게 한다.
좋은 예와 나쁜 예Good and bad use
카드가 왼쪽 변을 축으로 90도에서 정면으로 열린다.
원근 없이 회전해 패널이 폭만 줄어든다.
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 지속 | 0.65s | 0.455~0.91s | 0초부터 시작하는 공개 구간 |
| 시작 각도 | 90deg | 60~90deg | 왼쪽 경첩 기준 |
| 원근 거리 | 800px | 600~1200px | 부모에 설정 |
| 앵커 | 0% 50% | 좌우 또는 상하 변 | 회전축 고정 |
| 이징 | power3.out | power2.out, power3.out, sine.inOut | 움직임의 가속과 감속 |
gsap.set('.panel-parent', {perspective:800});
gsap.set('.target', {transformOrigin:'0% 50%', backfaceVisibility:'hidden'});
tl.fromTo('.target', {rotationY:90}, {rotationY:0, duration:0.65, ease:'power3.out'}, 0);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<파일>에서 <대상>에 힌지 리빌을 적용해. 0.65초, 시작 각도 90deg; 원근 거리 800px; 앵커 0% 50%, 이징 power3.out로 구현해. paused 타임라인으로 seek 가능하게 하고 완료 자세를 유지해.
Apply Hinge Reveal to <target> in <file>. Use a 0.65s segment with power3.out; implement these explicit settings: Initial angle: 90deg, Perspective: 800px, Transform origin: 0% 50%. Use a paused, seekable timeline and hold the final pose.
<파일>의 <대상> 레이어에 힌지 리빌을 적용해. 0.65초, 시작 각도 90deg; 원근 거리 800px; 앵커 0% 50%, power3.out를 사용하고 0초, 0.325초, 0.65초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.
Apply Hinge Reveal to the <target> layer in <file> with Initial angle: 90deg, Perspective: 800px, Transform origin: 0% 50%, using the supplied core snippet and a 0.65s segment with power3.out. Capture at 0s, 0.325s, and 0.65s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- animista.netBSD-2-Clause (FreeBSD)
- foundation/motion-uiMIT
- miniMAC/magicMIT
- DavidHDev/react-bitsMIT + Commons Clause v1.0
- gongnyang/reelforge (
gongnyang/reelforge:skills/reelforge/references/grammar/01-anchor-transform.md#door-hinge-open)Apache-2.0