How to render content of CALayer and sync with it in real-time

Question

I'm creating a backdrop layer.

I can

• find the correct layer that needs to be re-rendered in real-time.
• render these layers by using layer.render(in: context).
• update capture by using CADisplayLink in real-time.

But

Imagine I have a ScrollView, when user scrolls the view, the rendered content is one-frame behind the underlying view. Making the experience terrible.

Screenshots

Code

TimelineView(.animation) { timeline in
    Canvas { context, size in
        let _ = timeline.date // Update content with DisplayLink.
        context.withCGContext { cgContext in
            for layer in renderer.backdropLayers {
                layer.render(in: cgContext)
            }
        }
    }
}

How can I improve the rendering process?

I know there is a private class called CABackdropLayer available to use. But I'm doing a SwiftUI App. Ideally, I can create a backdrop effect view and apply custom Shader to it.

You can check out my post on Twitter (or X) for what I'm building now.