🔶 Transitions.dev：面向 AI Agent 的 UI 过渡效果

有两种情况可以解释这种延迟：模糊效果正在每一帧重新运行，或者遮罩正在强制触发重绘。在选择修复方案之前，值得先将这两种情况区分开来。

对 mask-position 做动画永远不会进入合成阶段——它会重绘该元素。而被重绘的元素位于一个位移滤镜链之中，因此整个滤镜会在 CPU 上每帧重新执行。这种开销会叠加：并不只是一次成本，而是重绘不断触发滤镜计算。

因此，解决方法不是微调模糊半径。动画属性必须完全离开绘制路径。如果将该场景静态绘制，再用一块同色的遮帘覆盖它，通过平移遮帘来实现视觉效果，就与使用遮罩几乎完全一致——而 transform 可以进入合成阶段。

一个权衡是：波浪会随着色带一起移动，而不是穿过固定在空间中的噪声产生涟漪。实际运动时，两者几乎难以区分。

Two things could explain the lag: the blur is re-running every frame, or the mask is forcing a repaint. Worth separating them before picking a fix.

Animating mask-position never composites — it repaints the element. And the element being repainted sits inside a displacement chain, so the whole filter re-executes on the CPU each frame. That compounds: it isn't one cost, it's the repaint feeding the filter.

So the fix isn't tuning the blur radius. The animated property has to leave the paint path entirely. If the field is painted statically and covered by a same-coloured curtain, translating the curtain is visually identical to masking — and transform composites.

One trade-off: the waves travel with the band instead of rippling through noise fixed in space. In motion, near-indistinguishable.