data-story-charts

用途\ndata-story-charts 用于制作“让图表承载论点”的数据故事视频：观众应记住的一个数字或变化是主角，图表按叙事顺序逐步揭示。适合解释性新闻式短片，画面清晰平静，只在关键处安排一两次戏剧性瞬间。\n\n主要能力\n- 图表类型：line（随时间变化）、bars（比较）、stacked（拆解总量）、counter（单个大数字）。\n- 版式：vertical 1080×1920 或 landscape 1920×1080，默认时长 15–20 秒，约每个数据节拍 3–5 秒。\n- 色调：editorial（默认浅纸背景）、dark（深蓝配发光强调色）、punchy（更快、关键时刻翻色）。\n- 叙事元素：顶部大计数器随图表跳动（等宽数字）、线条从左到右绘制、柱状按序生长、数据超出坐标范围时坐标轴平滑重缩放、2–4 个注释引脚、字幕短句。\n- 呈现要求：标签对比度至少 3:1，网格与刻度为muted深灰；每帧静止画面应能独立说明事实。\n\n使用方式\n先回答简报问题：观众要记住哪个数字或变化、数据（粘贴或文件，含单位、时间范围、来源）、惊喜点（尖峰、下跌、交叉、隐性成本）、哪 2–4 个时刻需要引脚、结尾句。随后编写“可读表”，逐节拍写清观众必须理解的一件事及其可读时长（标签至少 0.8 秒，句子约每词 0.3 秒）。动画遵循因果性：每个动作在屏幕上都有原因，选定一个主运动方向，场景退出为下一进入做铺垫，避免空闲漂浮或晃动；入场缓动最长 0.8 秒，组内错峰总时长不超过 0.5 秒，关键时刻前留 0.3–0.75 秒静止节拍。\n\n实现路线可选 SVG+GSAP in HyperFrames（默认）、Remotion、HyperFrames 内嵌 D3；三者均可支持折线、柱状、计数器、引脚，只有 HyperFrames 内嵌 D3 适合数千点或地图投影。数据写成函数或数组，绘制完全由时钟 t 驱动，通过一个补间更新 clock.t 并在 onUpdate 中重绘，保证 HyperFrames 跳帧时每帧一致。模板中需引入 GSAP（https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js）和 Google Fonts 的 Inter，并设置 html,body{margin:0;width:1080px;height:1920px;overflow:hidden}。\n\n适用场景\n解释性数据短视频、时间线里程碑、比较与构成拆解、单一关键指标展示；适合竖屏移动端与横屏视频两种投放形态。\n\n限制与注意事项\n屏幕上每个数字必须来自用户给的真实数据或已注明来源；估算值须在画面标注，禁止编造或把“示意”数字当真实数据。避免同时高亮多个系列、彩虹配色、浅灰标签、3D 柱、重网格线、无缓动的坐标跳变、引脚或字幕遮挡线条关键点。文本放不下时应删词而非加速。交付时提供最终图表帧海报（用 ffmpeg 截取并叠加为第 0 帧）、含关键数字与数据来源的字幕，并向用户说明数据节拍及可修改的数字或引脚。校验与渲染使用 npx hyperframes check、npx hyperframes snapshot --at <各引脚、重缩放中段、结尾>、npx hyperframes render -o renders/<name>.mp4；最终渲染前按 hook、手机宽度可读性、运动质量、构图、准确性、静音可概括性打分，仅修改 7 分及以下项直至全部 8 分以上。