효과Effects / 3D·깊이3D & Depth / Nº 559

코너 핀Corner Pin

Corner Pin

코너 핀

다른 이름Also known as · 코너 핀 변형

559

렌더 추가 예정CLIP COMING코너 핀Corner Pin정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 559. 코너 핀 · Corner Pin · power2.inOut

평면의 네 모서리가 각각 움직이며 화면이 원근 형태로 기울어져 공간에 붙는다The four corners of a plane move, tilting the image into a perspective shape.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

화면이나 간판이 실제 공간 속 면에 붙어 있다는 인상을 준다. 기기 화면이나 벽면 광고에 이미지를 끼워 넣을 때 쓴다Makes a screen or sign feel attached to a surface in space. Used to seat images in device mockups or wall ads.

언제 쓰나Use whenUSE WHEN

기기 목업 안에 스크린샷을 원근에 맞춰 넣을 때
포스터나 화면이 평면에서 원근으로 기울며 등장할 때

Fit a screenshot into a device mockup with correct perspective.
Tilt a poster or screen from flat into perspective as it appears.

과용 주의AvoidAVOID

모서리 이동 80px 초과 금지
네 점이 볼록 사각형을 유지하게 한다(교차 금지)

분류TagsTAGS

3D·깊이3D & Depth 설명Explain 전환Transition 제품 시연Product demo 설명 영상Explainer video 숏폼Short-form 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

평면 이미지의 네 모서리가 800ms 동안 각각 최대 40px 이동해 원근 사다리꼴이 된다. 이징 power2.inOut

과용 · 나쁜 사례OVERUSE

네 모서리를 다른 시간에 움직여 이미지가 찢어진 듯 보이거나, 모서리 이동을 200px 넘게 해 비틀린 종이처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	800ms	600~1200ms
모서리 이동	40px	20~80px	각 점 개별 값
이징	power2.inOut	power2~power3
투영	호모그래피		네 점 기반

GSAP

const c = { tl: [0,0], tr: [1920,0], br: [1920,1080], bl: [0,1080] };
const to = { tl: [40,30], tr: [1880,-20], br: [1900,1050], bl: [20,1080] };
const u = { p: 0 };
tl.to(u, { p: 1, duration: 0.8, ease: 'power2.inOut', onUpdate: () => draw(homography(c, to, u.p)) }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 이미지에 코너 핀을 넣어줘. 네 모서리를 0.8초 동안 (0,0)에서 (40,30), (1920,0)에서 (1880,-20), (1920,1080)에서 (1900,1050), (0,1080)에서 (20,1080)으로 옮기고 power2.inOut으로 원근 사다리꼴로 기울게 해. matrix3d 호모그래피로 계산해줘.

Add a corner pin to the image in <target>. Over 0.8 seconds move the corners (0,0) to (40,30), (1920,0) to (1880,-20), (1920,1080) to (1900,1050), (0,1080) to (20,1080) with power2.inOut, forming a perspective trapezoid. Compute it as a matrix3d homography.

Codex

<파일>에 corner pin을 구현해. 네 점 보간 p 0→1, 0.8s, power2.inOut, 호모그래피 matrix3d. 0.3초, 0.7초, 1.1초를 캡처해 각도가 점점 커지는지, 사각형이 뒤집히거나 교차하지 않는지 확인해.

Implement corner pin in <file>: four-point interpolation p 0 to 1, 0.8s, power2.inOut, homography matrix3d. Capture at 0.3s, 0.7s and 1.1s and verify the tilt grows progressively and the quad never flips or self-intersects.