타이포 오프닝Title Opener

4초 타이포 오프닝을 GSAP 코어와 공용 종이·먹·주홍 무대로 만들며, 0.30~1.70s에 mask-reveal 효과로 두 줄 제목을 아래에서 위로 공개한다 값은 yPercent 110 → 0, 줄 지속 1.05s, 줄 간격 0.35s, power3.out, overflow hidden이다. 1.40~2.30s에 char-stagger 효과로 부제를 글자 단위로 등장시킨다 값은 입력에서 출력까지 9글자 공백 포함, y 64px → 0, opacity 0 → 1, 글자 지속 0.62s, stagger 0.035s, power3.out, 제목과 오버랩 0.30s이다. 2.00~3.35s에 underline-draw 효과로 핵심어 다음 말 아래에 주홍 한 획을 긋는다 값은 pathLength 1, stroke 6px, strokeDashoffset 1 → 0, autoRound false, duration 1.35s, none, 부제와 오버랩 0.30s, 최종 홀드 0.65s이다. 단일 paused 타임라인으로 seek를 지원하고 마지막 0.6초 이상 완성 상태를 유지한다.

Create a 4-second typographic opener using GSAP core and the shared stage with paper, ink, and vermilion colors. At 0.30~1.70s, use mask-reveal to reveal the two-line title from bottom to top: yPercent 110 → 0, line duration 1.05s, line stagger 0.35s, power3.out, overflow hidden. At 1.40~2.30s, use char-stagger to reveal the subtitle character by character: "From input to output" (the source specifies 9 characters including spaces), y 64px → 0, opacity 0 → 1, character duration 0.62s, stagger 0.035s, power3.out, title overlap 0.30s. At 2.00~3.35s, use underline-draw to draw a single vermilion stroke beneath the key phrase "the next word": pathLength 1, stroke 6px, strokeDashoffset 1 → 0, autoRound false, duration 1.35s, none, subtitle overlap 0.30s, final hold 0.65s. Support seeking with a single paused timeline and hold the completed state for at least the final 0.6 seconds.

recipes/title-opener/index.html에 4초 레시피를 구현한다. 0.30~1.70s에 mask-reveal 효과로 두 줄 제목을 아래에서 위로 공개한다 값은 yPercent 110 → 0, 줄 지속 1.05s, 줄 간격 0.35s, power3.out, overflow hidden이다. 1.40~2.30s에 char-stagger 효과로 부제를 글자 단위로 등장시킨다 값은 입력에서 출력까지 9글자 공백 포함, y 64px → 0, opacity 0 → 1, 글자 지속 0.62s, stagger 0.035s, power3.out, 제목과 오버랩 0.30s이다. 2.00~3.35s에 underline-draw 효과로 핵심어 다음 말 아래에 주홍 한 획을 긋는다 값은 pathLength 1, stroke 6px, strokeDashoffset 1 → 0, autoRound false, duration 1.35s, none, 부제와 오버랩 0.30s, 최종 홀드 0.65s이다. node scripts/render.mjs recipes/title-opener --jobs 1로 렌더하고 python3 scripts/sheet.py recipes/title-opener로 접촉 인화를 만든다. 0.5초 첫 줄, 1초 두 번째 줄, 1.8초 부제 상승, 2.8초 부분 밑줄, 3.9초 완성 홀드를 확인한다 잘림과 주홍 초점 중복을 점검한 뒤 .staging/recipes/title-opener.json을 작성한다.

Implement the 4-second recipe in recipes/title-opener/index.html. At 0.30~1.70s, use mask-reveal to reveal the two-line title from bottom to top: yPercent 110 → 0, line duration 1.05s, line stagger 0.35s, power3.out, overflow hidden. At 1.40~2.30s, use char-stagger to reveal the subtitle character by character: "From input to output" (the source specifies 9 characters including spaces), y 64px → 0, opacity 0 → 1, character duration 0.62s, stagger 0.035s, power3.out, title overlap 0.30s. At 2.00~3.35s, use underline-draw to draw a single vermilion stroke beneath the key phrase "the next word": pathLength 1, stroke 6px, strokeDashoffset 1 → 0, autoRound false, duration 1.35s, none, subtitle overlap 0.30s, final hold 0.65s. Render with node scripts/render.mjs recipes/title-opener --jobs 1 and create a contact sheet with python3 scripts/sheet.py recipes/title-opener. Check the first line at 0.5s, the second line at 1s, the subtitle rising at 1.8s, the partially drawn underline at 2.8s, and the completed-state hold at 3.9s. Check for clipping and competing vermilion focal points, then write .staging/recipes/title-opener.json.