장 전환 카드Chapter Card Transition

4초 장 전환 카드을 GSAP 코어와 공용 종이·먹·주홍 무대로 만들며, 0.30~1.20s에 wipe 효과로 앞 장면을 먹 바탕 장 번호 카드로 교체한다 값은 inset 오른쪽 100% → 0%, duration 0.90s / none, 경계 4px / x 0 → 1164px이다. 0.90~1.60s에 motion-hierarchy 효과로 Bodoni 02를 먼저 읽고 장 제목과 부제를 따른다 값은 02 290px / y 32px / 0.70s, 제목 y 18px / 0.40s, 부제 opacity 1 / 1.60s, power3.out, 와이프 오버랩 0.30s, 카드 홀드 1.60~2.05s이다. 2.05~3.40s에 iris-mask 효과로 장 카드 중심에서 다음 장의 첫 장면을 공개한다 값은 circle 반경 0 → 680px, 중심 584px 290px, duration 1.35s / power2.inOut, 다음 장 완성 홀드 0.60s이다. 단일 paused 타임라인으로 seek를 지원하고 마지막 0.6초 이상 완성 상태를 유지한다.

Create a 4-second chapter card transition using GSAP core and the shared stage with paper, ink, and vermilion colors. At 0.30~1.20s, use wipe to replace the previous scene with a chapter number card on an ink-colored background: right inset 100% → 0%, duration 0.90s / none, boundary 4px / x 0 → 1164px. At 0.90~1.60s, use motion-hierarchy to establish Bodoni 02 first, followed by the chapter title and subtitle: 02 at 290px / y 32px / 0.70s, title y 18px / 0.40s, subtitle opacity 1 / 1.60s, power3.out, wipe overlap 0.30s, card hold 1.60~2.05s. At 2.05~3.40s, use iris-mask to reveal the opening scene of the next chapter from the center of the card: circle radius 0 → 680px, center 584px 290px, duration 1.35s / power2.inOut, completed next-scene hold 0.60s. Support seeking with a single paused timeline and hold the completed state for at least the final 0.6 seconds.

recipes/chapter-transition/index.html에 4초 레시피를 구현한다. 0.30~1.20s에 wipe 효과로 앞 장면을 먹 바탕 장 번호 카드로 교체한다 값은 inset 오른쪽 100% → 0%, duration 0.90s / none, 경계 4px / x 0 → 1164px이다. 0.90~1.60s에 motion-hierarchy 효과로 Bodoni 02를 먼저 읽고 장 제목과 부제를 따른다 값은 02 290px / y 32px / 0.70s, 제목 y 18px / 0.40s, 부제 opacity 1 / 1.60s, power3.out, 와이프 오버랩 0.30s, 카드 홀드 1.60~2.05s이다. 2.05~3.40s에 iris-mask 효과로 장 카드 중심에서 다음 장의 첫 장면을 공개한다 값은 circle 반경 0 → 680px, 중심 584px 290px, duration 1.35s / power2.inOut, 다음 장 완성 홀드 0.60s이다. node scripts/render.mjs recipes/chapter-transition --jobs 1로 렌더하고 python3 scripts/sheet.py recipes/chapter-transition로 접촉 인화를 만든다. 0.2초 앞 장면, 0.9초 와이프, 1.8초 먹 바탕 02 카드, 2.7초 원형 마스크, 3.9초 다음 장의 모서리와 완성 홀드를 확인한다 잘림과 주홍 초점 중복을 점검한 뒤 .staging/recipes/chapter-transition.json을 작성한다.

Implement the 4-second recipe in recipes/chapter-transition/index.html. At 0.30~1.20s, use wipe to replace the previous scene with a chapter number card on an ink-colored background: right inset 100% → 0%, duration 0.90s / none, boundary 4px / x 0 → 1164px. At 0.90~1.60s, use motion-hierarchy to establish Bodoni 02 first, followed by the chapter title and subtitle: 02 at 290px / y 32px / 0.70s, title y 18px / 0.40s, subtitle opacity 1 / 1.60s, power3.out, wipe overlap 0.30s, card hold 1.60~2.05s. At 2.05~3.40s, use iris-mask to reveal the opening scene of the next chapter from the center of the card: circle radius 0 → 680px, center 584px 290px, duration 1.35s / power2.inOut, completed next-scene hold 0.60s. Render with node scripts/render.mjs recipes/chapter-transition --jobs 1 and create a contact sheet with python3 scripts/sheet.py recipes/chapter-transition. Check the previous scene at 0.2s, the wipe at 0.9s, the ink-colored 02 card at 1.8s, the circular mask at 2.7s, and the corners of the next scene and completed-state hold at 3.9s. Check for clipping and competing vermilion focal points, then write .staging/recipes/chapter-transition.json.