원근 평면화Perspective Flatten

Perspective Flatten

원근 평면화

다른 이름Also known as · Scroll Perspective Flatten · 스크롤 입체 펴기

570

렌더 추가 예정CLIP COMING원근 평면화Perspective Flatten정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 570. 원근 평면화 · Perspective Flatten · power2.inOut

비스듬히 기울어 작게 보이던 화면이 진행에 따라 정면으로 펴지며 커지는 소개A screen that starts tilted and small rotates flat to face the viewer and grows.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

화면을 입체 오브젝트에서 읽을 수 있는 정보면으로 바꾼다. 기울기가 풀리는 만큼 초점이 화면 내용으로 옮겨 간다Turns a 3D-looking object into a readable information surface, moving focus to its content as the tilt resolves.

언제 쓰나Use whenUSE WHEN

앱 화면을 기울어진 상태에서 정면으로 소개할 때
스크롤하며 미리보기 카드가 본 화면으로 펴질 때
제품 캡처를 히어로 크기로 확대 공개할 때

Introduce an app screen from a tilted pose to front-on.
A preview card flattening into the main view as you scroll.
Enlarge a product capture into a hero reveal.

과용 주의AvoidAVOID

시작 기울기는 45도 이하로 한다
펴지는 동안 가장 빠른 구간이 중간에 오도록 inOut을 쓴다
최종 프레임은 회전 0으로 정확히 끝난다

분류TagsTAGS

3D·깊이3D & Depth 설명Explain 주목 끌기Attention 스크롤덱Scroll deck 제품 시연Product demo 설명 영상Explainer video 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

화면이 rotateX 30도, scale 0.85에서 1.5초 동안 정면 0도, scale 1로 펴지며 글자가 읽히기 시작한다

과용 · 나쁜 사례OVERUSE

기울기가 60도 이상이라 처음부터 읽지 못하거나, scale만 키우고 기울기는 그대로 남는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
시간	1.5s	1.0~2.2s	펴짐
회전	30→0deg	20~45deg	rotateX
scale	0.85→1	0.75~0.9 → 1	동시
perspective	1200px	900~1600px	부모
이징	power2.inOut	power1~power3

GSAP

gsap.set('.stage', { perspective: 1200 });
tl.fromTo('.screen', { rotationX: 30, scale: 0.85, transformOrigin: '50% 100%' },
  { rotationX: 0, scale: 1, duration: 1.5, ease: 'power2.inOut' }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <화면 이미지>를 원근으로 펴지는 소개 연출로 만들어 줘. 부모 perspective 1200px, 시작은 rotationX 30도, scale 0.85, transformOrigin 하단 중앙, 0.3초부터 1.5초 동안 power2.inOut으로 rotationX 0, scale 1이 되게 해. 최종 프레임은 회전 0으로 정확히 끝나고 paused 타임라인으로 만들어.

Use GSAP to flatten <screen image> into view. Parent perspective 1200px; start at rotationX 30 degrees, scale 0.85, transformOrigin bottom center, and from 0.3 seconds over 1.5 seconds go to rotationX 0, scale 1 with power2.inOut. The final frame ends exactly at zero rotation. Paused timeline.

Codex

<파일>의 화면에 perspective-flatten을 적용해. .stage perspective 1200, .screen fromTo rotationX 30→0, scale 0.85→1, transformOrigin '50% 100%', position 0.3, duration 1.5, ease power2.inOut. 0.3초는 기울어짐, 1.05초는 중간, 2.0초는 matrix가 identity에 가까운지 캡처로 확인해.

Apply perspective-flatten to the screen in <file>. .stage perspective 1200; .screen fromTo rotationX 30 to 0, scale 0.85 to 1, transformOrigin '50% 100%', position 0.3, duration 1.5, ease power2.inOut. Capture 0.3s (tilted), 1.05s (midway) and 2.0s (matrix near identity).