개념 설명 장면Concept Explainer

6초 개념 설명 장면을 GSAP 코어와 공용 종이·먹·주홍 무대로 만들며, 0.30~1.72s에 motion-hierarchy 효과로 제목을 먼저 읽고 질문과 설명을 따른다 값은 제목 y 32px / 0.70s, 부제 y 18px / 0.40s, 설명 y 10px / 0.22s, power3.out / power2.out이다. 1.72~3.47s에 progressive-disclosure 효과로 입력·모델·출력을 0.7초 간격으로 공개한다 값은 단계 3개, opacity 0 → 1, 이전 단계 0.25, 공개 0.30s / 마지막 0.35s, 연결선 scaleX 0 → 1 / 0.30s이다. 3.80~4.95s에 spotlight 효과로 모델을 100% 농도로 복원하고 주변을 낮춘다 값은 주변 opacity 0.25 / 0.65s, 목표 1.00 / 0.65s, 주홍 괄호 3px / 0.45s, 최종 홀드 1.05s이다. 단일 paused 타임라인으로 seek를 지원하고 마지막 0.6초 이상 완성 상태를 유지한다.

Create a 6-second concept explainer scene using GSAP core and the shared stage with paper, ink, and vermilion colors. At 0.30~1.72s, use motion-hierarchy to establish the title first, followed by the question and explanation: title y 32px / 0.70s, subtitle y 18px / 0.40s, explanation y 10px / 0.22s, power3.out / power2.out. At 1.72~3.47s, use progressive-disclosure to reveal input, model, and output at 0.7-second intervals: 3 steps, opacity 0 → 1, previous step opacity 0.25, reveal 0.30s / final reveal 0.35s, connector scaleX 0 → 1 / 0.30s. At 3.80~4.95s, use spotlight to restore the model to 100% opacity and dim its surroundings: surrounding opacity 0.25 / 0.65s, target opacity 1.00 / 0.65s, vermilion brackets 3px / 0.45s, final hold 1.05s. Support seeking with a single paused timeline and hold the completed state for at least the final 0.6 seconds.

recipes/concept-explainer/index.html에 6초 레시피를 구현한다. 0.30~1.72s에 motion-hierarchy 효과로 제목을 먼저 읽고 질문과 설명을 따른다 값은 제목 y 32px / 0.70s, 부제 y 18px / 0.40s, 설명 y 10px / 0.22s, power3.out / power2.out이다. 1.72~3.47s에 progressive-disclosure 효과로 입력·모델·출력을 0.7초 간격으로 공개한다 값은 단계 3개, opacity 0 → 1, 이전 단계 0.25, 공개 0.30s / 마지막 0.35s, 연결선 scaleX 0 → 1 / 0.30s이다. 3.80~4.95s에 spotlight 효과로 모델을 100% 농도로 복원하고 주변을 낮춘다 값은 주변 opacity 0.25 / 0.65s, 목표 1.00 / 0.65s, 주홍 괄호 3px / 0.45s, 최종 홀드 1.05s이다. node scripts/render.mjs recipes/concept-explainer --jobs 1로 렌더하고 python3 scripts/sheet.py recipes/concept-explainer로 접촉 인화를 만든다. 0.5초 제목, 2.5초 모델 공개, 3.4초 출력 공개, 4.8초 모델 초점, 5.9초 완성 홀드를 확인한다 잘림과 주홍 초점 중복을 점검한 뒤 .staging/recipes/concept-explainer.json을 작성한다.

Implement the 6-second recipe in recipes/concept-explainer/index.html. At 0.30~1.72s, use motion-hierarchy to establish the title first, followed by the question and explanation: title y 32px / 0.70s, subtitle y 18px / 0.40s, explanation y 10px / 0.22s, power3.out / power2.out. At 1.72~3.47s, use progressive-disclosure to reveal input, model, and output at 0.7-second intervals: 3 steps, opacity 0 → 1, previous step opacity 0.25, reveal 0.30s / final reveal 0.35s, connector scaleX 0 → 1 / 0.30s. At 3.80~4.95s, use spotlight to restore the model to 100% opacity and dim its surroundings: surrounding opacity 0.25 / 0.65s, target opacity 1.00 / 0.65s, vermilion brackets 3px / 0.45s, final hold 1.05s. Render with node scripts/render.mjs recipes/concept-explainer --jobs 1 and create a contact sheet with python3 scripts/sheet.py recipes/concept-explainer. Check the title at 0.5s, the model reveal at 2.5s, the output reveal at 3.4s, the model focus at 4.8s, and the completed-state hold at 5.9s. Check for clipping and competing vermilion focal points, then write .staging/recipes/concept-explainer.json.