효과Effects / UI 시연UI Demo / Nº 344

레이아웃 자리 양보Layout Yield

Layout Yield

레이아웃 자리 양보

다른 이름Also known as · Layer yield pivot · 층 이동 초점 양도

344

렌더 추가 예정CLIP COMING레이아웃 자리 양보Layout Yield정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 344. 레이아웃 자리 양보 · Layout Yield · power3.inOut

영상이나 카드가 옆으로 비켜나고 비운 자리에 큰 숫자나 문장이 등장한다.An existing layer moves aside to make room for a new focal message.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

시연에서 근거 수치, 설명으로 관심을 넘긴다.Transfers attention from a demonstration to its supporting explanation.

언제 쓰나Use whenUSE WHEN

시연에서 성과 수치로 초점을 넘길 때
카드 옆에 설명 공간을 만들 때

Shift attention from a demo to a result metric.
Make room for an explanation beside a card.

과용 주의AvoidAVOID

이동 후에도 기존 대상의 식별 가능한 부분을 남긴다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

영상 카드가 왼쪽 560px로 이동하고 빈자리에 수치가 나온다

과용 · 나쁜 사례OVERUSE

새 문장이 기존 카드 위에 겹쳐 양쪽 정보가 모두 가려진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기존 층 이동	600ms	450~800ms	공간 확보
신규 등장	400ms	250~600ms	빈 공간 공개
이동 거리	560px	360~720px	공통 앵커 기준
등장 시작	300ms	250~500ms	기존 이동과 겹침

GSAP

tl.to('.demo-card',{x:-560,duration:0.6,ease:'power3.inOut'},0);
tl.fromTo('.evidence',{x:32,opacity:0},{x:0,opacity:1,duration:0.4,ease:'power3.out'},0.3);
tl.to({}, {duration:1},0.7);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 레이아웃 자리 양보을 적용한다. 기존 카드를 600ms에 왼쪽 560px 옮기고 공통 앵커의 새 설명을 300ms부터 400ms 동안 공개한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Layout Yield to <target> in <file>. Move the existing card 560px left over 600ms and reveal the new explanation at the shared anchor over 400ms starting at 300ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 레이아웃 자리 양보 장면에 적용한다. 기존 카드를 600ms에 왼쪽 560px 옮기고 공통 앵커의 새 설명을 300ms부터 400ms 동안 공개한다. 0.17초·0.45초·0.90초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Layout Yield in the scene for <target> in <file>. Move the existing card 560px left over 600ms and reveal the new explanation at the shared anchor over 400ms starting at 300ms. Capture at 0.17s, 0.45s, 0.90s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인에 레이아웃 자리 양보의 초기 상태와 종료 상태를 함께 기록하고 0.70초까지 seek로 재현한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 레이아웃 자리 양보 대상 선택자와 기존 층 이동 600ms, 신규 등장 400ms, 이동 거리 560px를 싣고 최종 상태 유지 시간을 지정한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 0.70초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.

잘 맞는 조합Pairs well with

Nº 242카운트업Count-upCount-up

Nº 240주석 등장Annotation CalloutAnnotation Callout

출처Sources

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

local/HyperFrames-skills (claude-skill:hyperframes-animation/blueprints/video-text-pivot.md)unknown