Instead of moving individual paths inside the blurred environment, we apply the hardware-accelerated CSS animations (dynamic-river-main, etc.) to the structural (group) tags or parent div containers wrapped around those cached vectors.
By shifting the animation up to a container that has no active blur filters applied to itself, we are no longer changing the shape of the blurred object. The browser simply takes the pre-computed, cached image texture from the GPU memory buffer and shifts its global properties (translate3d, rotate, scale).
Instead of moving individual paths inside the blurred environment, we apply the hardware-accelerated CSS animations (dynamic-river-main, etc.) to the structural (group) tags or parent div containers wrapped around those cached vectors.
By shifting the animation up to a container that has no active blur filters applied to itself, we are no longer changing the shape of the blurred object. The browser simply takes the pre-computed, cached image texture from the GPU memory buffer and shifts its global properties (translate3d, rotate, scale).