분할 패널 전환Split Panel Handoff

Split Panel Handoff

분할 패널 전환

다른 이름Also known as · Type split panel handoff · 글자 분할 패널 전환

201

렌더 추가 예정CLIP COMING분할 패널 전환Split Panel Handoff정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 201. 분할 패널 전환 · Split Panel Handoff · power3.inOut

제목이 위아래로 갈라져 나가고 생긴 빈 공간에서 패널이 커져 화면을 차지하는 전환The title splits apart vertically and a panel grows from the opening to take over the screen.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

말에서 구체적 화면으로 초점이 넘어간다는 감각. 제목이 문이 되어 열린다Focus hands off from words to a concrete screen, with the title acting as a door.

언제 쓰나Use whenUSE WHEN

제목 카드에서 실제 화면이나 데모로 넘어갈 때
챕터 제목에서 본문 콘텐츠로 열어 줄 때

Move from a title card into a real screen or demo.
Open a chapter title into body content.

과용 주의AvoidAVOID

제목 분할선은 글자 x-height 중간을 피해 가로줄 사이에 둔다
패널은 제목 이동과 겹쳐 시작한다(0.2초 늦춰 시작)

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제목이 중간에서 갈라져 위 절반은 -300px, 아래 절반은 +300px로 0.8초 동안 밀려 나가고 그 사이에서 패널이 scale 0에서 1로 커진다

과용 · 나쁜 사례OVERUSE

제목이 갈라져 나가는 동안 글자가 잘려 읽히지 않거나, 패널이 제목이 다 사라진 뒤에야 등장해 공백이 생긴다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	0.8s	0.6~1.1s	제목과 패널 동시
제목 이동	±300px	200~420px	위와 아래 반대
패널 scale	0→1	0.1→1	중앙 원점
패널 지연	0.2s	0~0.3s	제목이 열린 후 시작

GSAP

const tp = document.querySelector('.top'), bt = document.querySelector('.bot');
tl.to(tp, { y: -300, duration: 0.8, ease: 'power3.inOut' }, 0)
  .to(bt, { y: 300, duration: 0.8, ease: 'power3.inOut' }, 0)
  .fromTo('.panel', { scale: 0 }, { scale: 1, duration: 0.6, ease: 'power3.out' }, 0.2);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<제목>이 위아래로 갈라지며 <패널>이 열리는 전환을 만들어줘. 제목을 위/아래 절반으로 나눠 위쪽은 y -300px, 아래쪽은 y +300px로 0.8초 power3.inOut, 패널은 0.2초부터 0.6초 동안 scale 0에서 1로 power3.out. 분할선은 제목 가로 중앙이고 paused 타임라인 하나로 만들어.

Build a split-panel handoff from <title> to <panel>. Split the title into top and bottom halves; the top goes y -300px and the bottom y +300px over 0.8 seconds (power3.inOut). The panel scales from 0 to 1 starting at 0.2 seconds for 0.6 seconds (power3.out). Split along the title's horizontal center and keep it in one paused timeline.

Codex

<파일>의 제목 카드에 split panel handoff를 적용해. .top y -300px, .bot y +300px (0.8s, power3.inOut), .panel scale 0에서 1 (0.2초부터 0.6s, power3.out). 0.3초에 제목이 갈라졌는지, 0.6초에 패널이 화면의 절반 이상인지, 1.0초에 패널이 전체를 차지하는지 캡처로 확인해.

Apply a split panel handoff to the title card in <file>. .top y -300px, .bot y +300px (0.8s, power3.inOut), .panel scale 0 to 1 (start 0.2s, 0.6s, power3.out). Capture at 0.3 seconds to confirm the title has split, at 0.6 seconds to confirm the panel covers over half the frame, and at 1.0 seconds to confirm it fills the screen.