<inputs>
请向我询问：
• 我的产品 + URL
• 8–12 个能讲述其产品故事的 UI 状态
• 每个状态中显示的真实数据
• 品牌颜色 + 字体 + 强调色
• 所需格式（1:1, 16:9, 9:16）
</inputs>

<rules>
一个 HTML 文件。一个 canvas
一个 draw(t) 函数

无 CSS 过渡
无计时器
帧之间不保留状态

单一形状，永不切割

每个状态都是同一元素在改变大小、半径和颜色，同时内容发生切换

由光标驱动序列，包含真实的点击、输入和一次拖拽

真实 UI。真实数据。无占位符。

</rules>
<structure>
120 BPM 网格

每个节拍都有动作发生

logo → 按钮 → 手柄字段 → “这是你吗？” → 加载器 → 图钉 → 填充用户的地球仪 → 匹配项 → 标签页 → RSVP → 搜索 → logo

</structure>

<motion>
处处使用闭式弹簧，仅带极小的过冲。

如果一个值多次改变目标，则为每次变化叠加一个弹簧

内容在其容器开始变形后进入，并在下一次变形前离开，以确保文本从不重叠

在过渡期间使用短暂的模糊效果

切勿将黑色直接淡入强调色。改为让强调元素在状态间移动

通过将每个边缘放在不同的弹簧上，使标签指示器拉伸

缩放摄像机，使每个状态填满画面

使最后一帧等于第一帧，以便整体循环播放
</motion>

<export>
首先，将每个节拍渲染为一帧，生成接触表

修复任何拥挤或损坏的部分

然后，在无头 Chrome 中以 60fps 渲染每一帧，平均 6 个子帧以实现运动模糊

通过管道传入 ffmpeg：
H.264 + yuv420p

并行导出所有宽高比
</export>