데이터 스토리Data Story

6초 데이터 스토리을 GSAP 코어와 공용 종이·먹·주홍 무대로 만들며, 0.30~2.32s에 count-up 효과로 고른다의 후보 확률 62%를 결론으로 제시한다 값은 프록시 0 → 62, 정수 반올림, duration 1.65s, power2.out, 단위 2.02s / 0.30s이다. 2.10~4.02s에 bar-grow 효과로 같은 척도로 다섯 후보의 확률을 비교한다 값은 62·21·9·5·3%, 7px/%, scaleX 0 → 1, duration 1.05s, stagger 0.08s, power2.out, 큰 숫자는 먹색으로 전환이다. 3.85~5.02s에 annotation-callout 효과로 고른다가 다섯 후보 중 가장 높은 확률임을 해석한다 값은 지시선 pathLength 1 / 0.65s / none, 텍스트 y 8px / 0.35s, stagger 0.12s, 최종 홀드 0.98s이다. 단일 paused 타임라인으로 seek를 지원하고 마지막 0.6초 이상 완성 상태를 유지한다.

Create a 6-second data story using GSAP core and the shared stage with paper, ink, and vermilion colors. At 0.30~2.32s, use count-up to present the 62% candidate probability for "picks" as the headline result: proxy 0 → 62, round to integers, duration 1.65s, power2.out, unit reveal at 2.02s / 0.30s. At 2.10~4.02s, use bar-grow to compare five candidate probabilities on the same scale: 62·21·9·5·3%, 7px/%, scaleX 0 → 1, duration 1.05s, stagger 0.08s, power2.out, change the headline number to ink. At 3.85~5.02s, use annotation-callout to explain that "picks" has the highest probability among the five candidates: leader line pathLength 1 / 0.65s / none, text y 8px / 0.35s, stagger 0.12s, final hold 0.98s. Support seeking with a single paused timeline and hold the completed state for at least the final 0.6 seconds.

recipes/data-story/index.html에 6초 레시피를 구현한다. 0.30~2.32s에 count-up 효과로 고른다의 후보 확률 62%를 결론으로 제시한다 값은 프록시 0 → 62, 정수 반올림, duration 1.65s, power2.out, 단위 2.02s / 0.30s이다. 2.10~4.02s에 bar-grow 효과로 같은 척도로 다섯 후보의 확률을 비교한다 값은 62·21·9·5·3%, 7px/%, scaleX 0 → 1, duration 1.05s, stagger 0.08s, power2.out, 큰 숫자는 먹색으로 전환이다. 3.85~5.02s에 annotation-callout 효과로 고른다가 다섯 후보 중 가장 높은 확률임을 해석한다 값은 지시선 pathLength 1 / 0.65s / none, 텍스트 y 8px / 0.35s, stagger 0.12s, 최종 홀드 0.98s이다. node scripts/render.mjs recipes/data-story --jobs 1로 렌더하고 python3 scripts/sheet.py recipes/data-story로 접촉 인화를 만든다. 0.5초 숫자 증가, 2.5초 막대 성장, 4초 지시선, 5.9초 해석 홀드를 확인한다 잘림과 주홍 초점 중복을 점검한 뒤 .staging/recipes/data-story.json을 작성한다.

Implement the 6-second recipe in recipes/data-story/index.html. At 0.30~2.32s, use count-up to present the 62% candidate probability for "picks" as the headline result: proxy 0 → 62, round to integers, duration 1.65s, power2.out, unit reveal at 2.02s / 0.30s. At 2.10~4.02s, use bar-grow to compare five candidate probabilities on the same scale: 62·21·9·5·3%, 7px/%, scaleX 0 → 1, duration 1.05s, stagger 0.08s, power2.out, change the headline number to ink. At 3.85~5.02s, use annotation-callout to explain that "picks" has the highest probability among the five candidates: leader line pathLength 1 / 0.65s / none, text y 8px / 0.35s, stagger 0.12s, final hold 0.98s. Render with node scripts/render.mjs recipes/data-story --jobs 1 and create a contact sheet with python3 scripts/sheet.py recipes/data-story. Check the number counting up at 0.5s, the bars growing at 2.5s, the leader line at 4s, and the interpretation hold at 5.9s. Check for clipping and competing vermilion focal points, then write .staging/recipes/data-story.json.