효과Effects / 가상 카메라Camera / Nº 228

크레인 틸트Crane Tilt

Crane Tilt

크레인 틸트

다른 이름Also known as · 크레인과 틸트 · crane-pedestal-tilt

228

렌더 추가 예정CLIP COMING크레인 틸트Crane Tilt정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 228. 크레인 틸트 · Crane Tilt · power2.inOut

시점이 위아래로 이동하는 동시에 보는 각도가 바뀌어 높은 전경과 대상의 눈높이를 이어 준다.Move the viewpoint vertically while changing its viewing angle.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

대상의 높이와 주변 공간의 규모를 전달한다.Conveys height and spatial scale.

언제 쓰나Use whenUSE WHEN

높은 구조물에서 눈높이로 내려올 때
공간 규모를 보여주며 대상을 드러낼 때

Descend from a tall structure to eye level.
Reveal a subject while showing the scale of its surroundings.

과용 주의AvoidAVOID

정보 텍스트는 마지막 눈높이에서 보여준다.

분류TagsTAGS

가상 카메라Camera 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 제품 시연Product demo 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

월드를 120px 이동하고 12도 기울여 높은 전경에서 눈높이로 이어 준다.

과용 · 나쁜 사례OVERUSE

평면 텍스트를 크게 기울여 읽을 수 없게 한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1600ms	1000~2200ms	수직 이동과 회전을 동기화
수직 이동	120px	60~200px	월드 역이동
틸트	12deg	6~18deg	회전 X
원근 거리	1000px	800~1400px	부모 perspective

GSAP

const tl = gsap.timeline({paused:true});
gsap.set('.viewport', {perspective:1000});
gsap.set('.world', {transformStyle:'preserve-3d', y:-120, rotationX:12});
tl.to('.world', {y:0, rotationX:0, duration:1.6, ease:'power2.inOut'});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 크레인 틸트를 적용해. CSS perspective 아래 HTML 월드의 translateY와 rotateX를 GSAP 코어로 함께 보간한다. 지속 1600ms; 수직 이동 120px; 틸트 12deg; 원근 거리 1000px. 이징은 power2.inOut로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Crane Tilt to <target> in <file>. Under a 1000px perspective parent, animate world translation from -120px to 0 and rotationX from 12 degrees to 0 over 1600ms. Use power2.inOut and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 크레인 틸트를 적용해. CSS perspective 아래 HTML 월드의 translateY와 rotateX를 GSAP 코어로 함께 보간한다. 지속 1600ms; 수직 이동 120px; 틸트 12deg; 원근 거리 1000px. 이징은 power2.inOut를 사용해. 0초·0.8초·1.6초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Crane Tilt to the target scene in <file>. Under a 1000px perspective parent, animate world translation from -120px to 0 and rotationX from 12 degrees to 0 over 1600ms. Use power2.inOut. Capture at 0, 0.8, and 1.6 seconds to verify the initial state, the defining intermediate change, and the final state. Seek backward to the same times and compare the images.