企业官网建设流程全解析

HyperFrames 数据动效指南：Data in Motion 让数据在视频中"活"起来

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

本指南基于 HyperFrames 创意技能库（skills/hyperframes-creative）中的>/* count-up + track fill on the same ease (the>.stat-value, .timer, .data-column { font-variant-numeric: tabular-nums; }

mk-progress-stat的源码里正是这样做的（#mk-ps-num上声明了font-variant-numeric: tabular-nums）。此外，数据场景还可按需开启diagonal-fractions（斜分数，1/2→½）、all-small-caps（缩写小型大写）以及关闭代码中的连字。字幕、计时器、比分牌这类纵向对齐的数字都离不开tabular-nums。

避免网页模式：视频不是仪表盘

这是本指南的重头戏，列出了五条"禁止项"。它们的共同出发点是：网页图表设计为长时间盯屏优化，而视频观众只有 3 秒左右的窗口。

禁 1：不要用饼图（Pie Charts）

饼图的角度对比极难目测，且视觉上"像 PowerPoint"。在三秒窗口内，观众无法完成角度比较。需要占比关系时，改用横向比例条或单一高亮数字 + 填充条（参见上文 mk-progress-stat 的写法）。

禁 2：不要用多轴图表（Multi-axis Charts）

双 Y 轴图表强迫观众在短时间内研究两条曲线的交点与各自刻度，这是典型的"网页式信息负载"。如果确有多个量纲，应拆分为多个独立场景，每个场景只讲一个量纲。

禁 3：不要用六宫格仪表盘（6-panel Dashboards）

2-3 个相关指标并排是可以的，6 个以上就变成网页后台了。视频是顺序媒介，靠"时间"而不是"空间密度"来递进信息：把 6 个指标拆进 2-3 个镜头，每个镜头聚焦 2-3 个，观众才能逐帧消化。

禁 4：不要用网格线、刻度线和图例（Gridlines, Tick Marks, Legends）

这些元素在网页上是辅助阅读的工具，在视频里是视觉噪音。三秒窗口中观众没有时间去对刻度；图例更是强制观众"先看说明再看图"。正确做法：直接把数值标在图形上，用颜色本身传达系列归属（同一概念用同一颜色），删掉一切需要"二次阅读"的元素。

禁 5：不要输出图表库的结果（No Chart Library Output）

不要用 D3、Chart.js 等图表库生成画面，要用 GSAP + SVG/CSS 手工搭建。原因有三：

1. 图表库生成的是"网页组件"（含默认网格、坐标轴、图例、tooltip 交互），几乎必然违反上述禁 2-4；
2. 图表库默认样式难以与 HyperFrames 的家风（house style）融合，配色与字体无法精确控制；
3. 从渲染管线角度，所有动效必须挂载到可 seek 的时间线上（见 motion-principles.md 的"Load-Bearing GSAP Rules"），图表库自身的动画系统无法被 HyperFrames 的 capture engine 确定性回放。

仓库实例：data-chart 的对照学习

仓库中的 contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes