动态图形

分析 http://sprites.ai，并基于我们自己的 UI 制作一支产品宣传片……

提示词

分析 http://sprites.ai，并基于我们自己的 UI 制作一支产品宣传片，而不是通用组件。

<direction>
Dribbble 级别的 UI 动效。一个形状，从不切换：每个状态都是同一个元素在形变它的大小、圆角和颜色，同时其内容以短暂的模糊进行替换。一个光标通过真实的点击和拖拽驱动每一次变化。暖灰色画布，黑白组件，一个强调色（#FD9543），Geist。到处都是弹簧，最多只有极小的过冲。摄像机会推近，让每个状态填满画面。最后一帧 = 第一帧，所以它能循环。
禁止：弹跳式缓动、粒子、发光、UI 外框上的渐变、不匹配的图标描边、空档时间，任何看起来像模板的东西。
</direction>

<structure>
120 BPM，7 小节，每一拍都有东西发生。
连接广告账户（Meta、Google、LinkedIn、TikTok、Reddit 标志）→ 加载器 → 勾选 → 提示栏输入「Launch ads that convert」→ 岛屿「Researching 42 competitors」→ Ads Library 真实广告墙滚动并停在一条表现最佳的广告上 → 审批卡片 → Approve & launch → 预算滑块拉伸超过最大值 → Autopilot 开关 → 旋钮变成一个横跨各渠道的液态标签指示器 → ROAS 图表自行绘制并带悬停提示 → ⌘K → 输入「pause」→ 弹出提示「Paused 3 losing ads」→ 回到按钮。
</structure>

<build>
1. 单个 HTML 文件，1440x1440。每个样式都在 seek(t) 内部计算：没有 CSS 过渡，没有计时器，帧与帧之间没有状态。
2. 弹簧是闭式阶跃响应。一个多次改变目标的值是多个弹簧之和，所以它始终是时间的纯函数。
3. 标签指示器和开关旋钮：两条边乘坐不同的弹簧，所以前缘会抢先伸展。
4. 拖拽是直接操控：按住时，值跟随光标。松开时，它从所在位置弹回。
5. 不要音乐。用 numpy 合成 UI 音效，并根据每个音效在节拍网格上测得的峰值来放置它。
6. 用 Playwright 渲染：每帧 4 个子帧，用 ffmpeg tmix 混合，以在 60fps 下实现运动模糊。
7. 先每拍渲染一帧。修复任何偏离网格、拥挤或难以阅读的地方。
</build>

<gotchas>
不要在任何摄像机缩放的东西上使用 will-change。被替换的文字需要有自己的进入/退出时机。让最后一帧与第一帧匹配，包括光标的位置和速度，否则循环会卡顿。
</gotchas>

在写任何代码之前，先把状态列表按节拍网格展示给我看。

视频

我用 Opus 5.5 为我的活动管理网站做了这支宣传片。一切…

这段视频是一个 AI 做的 🤯 靠代码，不是靠模板。

Opus5.5 motion graphics 用 Remotion 很容易复用，所以很方便！ #AIMotionDesign

Claude Opus 5.5 完全用代码做出了这整支视频。

我忍不住又做了一次，这次是为 RedShip……

Claude Opus 5.5 刚刚为 Bridge… 制作了这支周边发布视频