动画图表，用代码构建
从空白页面开始的三个提示：构建、再检查、导出。
开始前： 如果存在 brand.md 和 MOTION.md，请读取它们。如果不存在，则先运行 brand-intake，或者询问十六进制颜色代码、字体和徽标文件。在没有这些的情况下，切勿声称结果符合品牌风格。
第 1 步：询问数字，然后等待
标题、标签、确切数值，以及它们是真实结果还是示例数据。示例数据需要在每一帧上显示“示例数据”标签。切勿四舍五入、重新格式化或添加任何数字。
提示 1：构建它
我想要一个用于 LinkedIn 帖子的动画图形。将其构建为单个 HTML 文件，我可以在浏览器中打开。
标题：“[标题]”。[如果是示例数据：保持“示例数据”可见。]
数值：[标签 1：值 1]，[标签 2：值 2]，...
动画有四种状态：
1. 开始：[初始样子]。
2. 变化：[唯一变化的元素]。没有淡出并替换的元素。
3. 保持：完成后的图表，并标注[标题数值]。
4. 返回：平缓回到开始状态，使循环无跳跃。
时间：总共 8 秒。变化约 2 秒，保持 4 秒，返回 1.5 秒。
外观：背景 [BG]，文字 [TEXT]，强调色 [ACCENT]，字体 [FONT]。无外部字体或图片。无渐变、无发光、无弹跳。
尺寸：1080 x 1350 像素。
构建规则：
- 仅根据时间计算每一帧。添加 window.seek(seconds)。
- 标题、标签和坐标轴从不移动。只有图表变化。
- 最后一帧必须与第一帧完全一致。
构建完成后，在 0、1、2、4 和 7 秒处截取屏幕截图。检查是否有重叠文本或任何被截断的内容。修复你发现的问题，并告诉我你做了哪些更改。
提示 2：再检查一下
检查捕获的五帧以及循环边界。确认数值保持不变、标签清晰可读、无重叠、每个元素仅在应该出现时出现。仅报告你实际观察到的问题。修复你发现的任何问题，保留先前的版本，并重新捕获相同的帧。如果未发现问题，请说明，并且不要凭空创造修订。
提示 3：导出它
现在将其转换为可供发布的视频和 GIF。使用此计算机上已有的工具。如果需要安装任何东西，请在安装之前停下来并告诉我是什么。给我一个 MP4（1080 x 1350，8 秒）和一个无限循环的 GIF。然后从完成的 GIF 中展示三帧给我检查，以确保效果正确。