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 Dashboards2-3 个相关指标并排是可以的6 个以上就变成网页后台了。视频是顺序媒介靠时间而不是空间密度来递进信息把 6 个指标拆进 2-3 个镜头每个镜头聚焦 2-3 个观众才能逐帧消化。禁 4不要用网格线、刻度线和图例Gridlines, Tick Marks, Legends这些元素在网页上是辅助阅读的工具在视频里是视觉噪音。三秒窗口中观众没有时间去对刻度图例更是强制观众先看说明再看图。正确做法直接把数值标在图形上用颜色本身传达系列归属同一概念用同一颜色删掉一切需要二次阅读的元素。禁 5不要输出图表库的结果No Chart Library Output不要用 D3、Chart.js 等图表库生成画面要用 GSAP SVG/CSS 手工搭建。原因有三图表库生成的是网页组件含默认网格、坐标轴、图例、tooltip 交互几乎必然违反上述禁 2-4图表库默认样式难以与 HyperFrames 的家风house style融合配色与字体无法精确控制从渲染管线角度所有动效必须挂载到可 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 数据动效指南：Data in Motion 让数据在视频中“活“起来
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 Dashboards2-3 个相关指标并排是可以的6 个以上就变成网页后台了。视频是顺序媒介靠时间而不是空间密度来递进信息把 6 个指标拆进 2-3 个镜头每个镜头聚焦 2-3 个观众才能逐帧消化。禁 4不要用网格线、刻度线和图例Gridlines, Tick Marks, Legends这些元素在网页上是辅助阅读的工具在视频里是视觉噪音。三秒窗口中观众没有时间去对刻度图例更是强制观众先看说明再看图。正确做法直接把数值标在图形上用颜色本身传达系列归属同一概念用同一颜色删掉一切需要二次阅读的元素。禁 5不要输出图表库的结果No Chart Library Output不要用 D3、Chart.js 等图表库生成画面要用 GSAP SVG/CSS 手工搭建。原因有三图表库生成的是网页组件含默认网格、坐标轴、图例、tooltip 交互几乎必然违反上述禁 2-4图表库默认样式难以与 HyperFrames 的家风house style融合配色与字体无法精确控制从渲染管线角度所有动效必须挂载到可 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
