AWESOME AI MOTION
효과Effects / 가상 카메라Camera / Nº 239

소실점 이동Vanishing Point Shift

Vanishing Point Shift
소실점 이동
다른 이름Also known as · perspective-origin-eye-shift
239
렌더 추가 예정CLIP COMING소실점 이동Vanishing Point Shift정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 239. 소실점 이동 · Vanishing Point Shift · power2.inOut

입체 요소의 소실점이 움직여 화면 중심이나 크기를 크게 바꾸지 않고도 바라보는 위치가 달라진다.Shift the vanishing point to change the viewpoint without moving the layout substantially.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
올려다보기와 미세한 관찰 시점 변화를 전달한다.Suggests a low-angle view or subtle observation shift.
언제 쓰나Use whenUSE WHEN
  • 입체 패널을 낮은 각도에서 관찰할 때
  • 레이아웃을 유지하며 시점을 조금 바꿀 때
  • Observe a three-dimensional panel from a low angle.
  • Shift the viewpoint subtly while preserving the layout.
과용 주의AvoidAVOID
  • 자식 요소에 실제 Z 깊이나 회전을 준다.
분류TagsTAGS
가상 카메라Camera설명Explain순서·흐름Sequence설명 영상Explainer video스크롤덱Scroll deck제품 시연Product demo난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

소실점을 50% 50%에서 50% 70%로 옮겨 패널의 깊이만 달라지게 한다.

과용 · 나쁜 사례OVERUSE

깊이가 없는 평면에서 소실점만 바꿔 아무 변화가 없다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속1600ms1000~2200ms미세한 시점 변화
원근 거리1000px800~1600px공통 3D 부모
시작 소실점50% 50%40%~60% 40%~60%화면 중앙
종료 소실점50% 70%40%~60% 60%~75%세로 관찰 위치
GSAP
const tl = gsap.timeline({paused:true});
gsap.set('.viewport', {perspective:1000, perspectiveOrigin:'50% 50%'});
gsap.set('.panel', {z:120, rotationY:15});
tl.to('.viewport', {perspectiveOrigin:'50% 70%', duration:1.6, ease:'power2.inOut'});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 소실점 이동를 적용해. CSS perspective-origin의 가로와 세로 비율을 GSAP 코어로 보간해 공통 3D 공간의 소실점을 옮긴다. 지속 1600ms; 원근 거리 1000px; 시작 소실점 50% 50%; 종료 소실점 50% 70%. 이징은 power2.inOut로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.

Apply Vanishing Point Shift to <target> in <file>. Set perspective to 1000px and tween perspective-origin from 50% 50% to 50% 70% over 1600ms; give children real depth. Use power2.inOut and a paused GSAP core timeline that produces identical states when seeking backward.

Codex

<파일>의 대상 장면에 소실점 이동를 적용해. CSS perspective-origin의 가로와 세로 비율을 GSAP 코어로 보간해 공통 3D 공간의 소실점을 옮긴다. 지속 1600ms; 원근 거리 1000px; 시작 소실점 50% 50%; 종료 소실점 50% 70%. 이징은 power2.inOut를 사용해. 0초·0.8초·1.6초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.

Apply Vanishing Point Shift to the target scene in <file>. Set perspective to 1000px and tween perspective-origin from 50% 50% to 50% 70% over 1600ms; give children real depth. 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.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에서 1.6초 진행값을 구동하고 seek마다 좌표와 렌더 상태를 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 지속 1600ms; 원근 거리 1000px; 시작 소실점 50% 50%; 종료 소실점 50% 70%를 싣고 대상 좌표계와 도착 상태를 명시한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 1.6초 타임라인에 매핑하고 scrub에서는 스프링 대신 ease-out 또는 선형 진행을 쓴다.
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
원근 격자 전진Perspective Grid Drift
571
Nº 571원근 격자 전진Perspective Grid DriftPerspective Grid Drift
렌더 추가 예정CLIP COMING
3D 조립Depth Assemble
549
Nº 5493D 조립Depth AssembleDepth Assemble
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo