제품 UI 시연Product UI Demo

6초 제품 UI 시연을 GSAP 코어와 공용 종이·먹·주홍 무대로 만들며, 0.38~1.91s에 typing-input 효과로 입력창에 질문을 한 글자씩 입력한다 값은 글자 간격 고정 배열 0.07~0.17s, 캐럿 반주기 0.24s, 입력 완료 1.91s이다. 1.61~3.14s에 cursor-click 효과로 입력을 마친 질문을 보내기 버튼으로 전송한다 값은 곡선 이동 810px / y -181px / 높이 150px / 1.10s / power2.inOut, 클릭 2.71s, scale 0.94 / 0.12s, 파문 2.4배 / 0.40s이다. 2.83~4.71s에 answer-stream 효과로 10개 묶음으로 모델 응답을 차례로 출력한다 값은 묶음 간격 0.18s, 초기 opacity 0.22, 정착 0.26s / none, 입력과 클릭 오버랩 0.30s이다. 4.41~5.35s에 zoom-callout 효과로 응답 핵심인 확률 계산을 옆 원형 콜아웃으로 확대한다 값은 글자 29px → 104px / 3.59배, 원 지름 330px, x -120px → 0 / scale 0.25 → 1 / 0.85s / power3.out, 연결선 0.65s, 스트림 오버랩 0.30s, 최종 홀드 0.65s이다. 단일 paused 타임라인으로 seek를 지원하고 마지막 0.6초 이상 완성 상태를 유지한다.

Create a 6-second product UI demo using GSAP core and the shared stage with paper, ink, and vermilion colors. At 0.38~1.91s, use typing-input to type the question into the input field one character at a time: fixed array of character intervals 0.07~0.17s, caret half-cycle 0.24s, input complete at 1.91s. At 1.61~3.14s, use cursor-click to submit the completed question via the send button: curved movement 810px / y -181px / arc height 150px / 1.10s / power2.inOut, click at 2.71s, scale 0.94 / 0.12s, ripple scale 2.4 / 0.40s. At 2.83~4.71s, use answer-stream to reveal the model response sequentially in 10 chunks: chunk interval 0.18s, initial opacity 0.22, settle 0.26s / none, input and click overlap 0.30s. At 4.41~5.35s, use zoom-callout to magnify the key response phrase, "probability calculation," in a circular callout beside it: text 29px → 104px / 3.59 times, circle diameter 330px, x -120px → 0 / scale 0.25 → 1 / 0.85s / power3.out, connector 0.65s, stream 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/product-demo/index.html에 6초 레시피를 구현한다. 0.38~1.91s에 typing-input 효과로 입력창에 질문을 한 글자씩 입력한다 값은 글자 간격 고정 배열 0.07~0.17s, 캐럿 반주기 0.24s, 입력 완료 1.91s이다. 1.61~3.14s에 cursor-click 효과로 입력을 마친 질문을 보내기 버튼으로 전송한다 값은 곡선 이동 810px / y -181px / 높이 150px / 1.10s / power2.inOut, 클릭 2.71s, scale 0.94 / 0.12s, 파문 2.4배 / 0.40s이다. 2.83~4.71s에 answer-stream 효과로 10개 묶음으로 모델 응답을 차례로 출력한다 값은 묶음 간격 0.18s, 초기 opacity 0.22, 정착 0.26s / none, 입력과 클릭 오버랩 0.30s이다. 4.41~5.35s에 zoom-callout 효과로 응답 핵심인 확률 계산을 옆 원형 콜아웃으로 확대한다 값은 글자 29px → 104px / 3.59배, 원 지름 330px, x -120px → 0 / scale 0.25 → 1 / 0.85s / power3.out, 연결선 0.65s, 스트림 오버랩 0.30s, 최종 홀드 0.65s이다. node scripts/render.mjs recipes/product-demo --jobs 1로 렌더하고 python3 scripts/sheet.py recipes/product-demo로 접촉 인화를 만든다. 1.5초 타이핑, 2.7초 버튼 도착, 3.5초 응답 묶음, 5.8초 확대 결과와 완성 홀드를 확인한다 잘림과 주홍 초점 중복을 점검한 뒤 .staging/recipes/product-demo.json을 작성한다.

Implement the 6-second recipe in recipes/product-demo/index.html. At 0.38~1.91s, use typing-input to type the question into the input field one character at a time: fixed array of character intervals 0.07~0.17s, caret half-cycle 0.24s, input complete at 1.91s. At 1.61~3.14s, use cursor-click to submit the completed question via the send button: curved movement 810px / y -181px / arc height 150px / 1.10s / power2.inOut, click at 2.71s, scale 0.94 / 0.12s, ripple scale 2.4 / 0.40s. At 2.83~4.71s, use answer-stream to reveal the model response sequentially in 10 chunks: chunk interval 0.18s, initial opacity 0.22, settle 0.26s / none, input and click overlap 0.30s. At 4.41~5.35s, use zoom-callout to magnify the key response phrase, "probability calculation," in a circular callout beside it: text 29px → 104px / 3.59 times, circle diameter 330px, x -120px → 0 / scale 0.25 → 1 / 0.85s / power3.out, connector 0.65s, stream overlap 0.30s, final hold 0.65s. Render with node scripts/render.mjs recipes/product-demo --jobs 1 and create a contact sheet with python3 scripts/sheet.py recipes/product-demo. Check typing at 1.5s, cursor arrival at the button at 2.7s, response chunks at 3.5s, and the magnified result and completed-state hold at 5.8s. Check for clipping and competing vermilion focal points, then write .staging/recipes/product-demo.json.