SwiftUI How you can Apply Shader "no matter" is behind the view

I’m writing a program that has some pictures the place you possibly can scroll via and I even have a rectangle-like view that is named PixeleteView the place I need to pixelate the content material behind, it’s straightforward to use my shader to the view and work nevertheless I need to pixelate the photographs under with out making use of my shader to the photographs.

What I imply is that I need to apply an impact identical to blur or some type nevertheless on the background content material of the present view which means taking the background content material redrawing it within the present background and making use of the impact to it
or that is what a I initially thought nevertheless I could not do this.

I’m new to Swift and tried a number of issues and coudn’t discover a working answer not even partially.

// ContentView

struct ContentView: View {
    var physique: some View {
        ZStack() {
            Content material()
            PixeleteView()
                
        }
    }
}

Content material is only a scrollable pictures and texts, nevertheless it may be something.

Inside my PixeleteView I need to apply my shader

// PixeleteView

struct PixeleteView: View {
    var physique: some View {
       .
       .
       .
       .background(
        
        //
        // That is the place I would like my shader to be
        // Nevertheless as an alternative of this it should change the background of 
        // this view.
        //
        // You may consider this like
        // Rectangle()
        //    .fill(.ultraThinMaterial)
        //
       )
       .clipShape(RoundedRectangle(cornerRadius: 50))
    }

And my shader is jsut a easy steel file to pixelete the content material
With .layerEffect utilized to

// MySahder.steel

#embrace <metal_stdlib>
#embrace <SwiftUI/SwiftUI_Metal.h>
utilizing namespace steel;


[[ stitchable ]] half4 pixellate(float2 place, SwiftUI::Layer layer, float power) {
    float min_strength = max(power, 0.0001);
    float coord_x = min_strength * spherical(place.x / min_strength);
    float coord_y = min_strength * spherical(place.y / min_strength);
    return layer.pattern(float2(coord_x, coord_y));
}

So I consider I might convey the thought of what I’m making an attempt to do as an alternative of utilizing Rectangle().fill(.ultraThinMaterial) I need to implement my very own impact

Right here is an instance once I run this

// Instance

Picture(systemName: "determine.run.circle.fill")
    .font(.system(measurement: 300))
    .layerEffect(ShaderLibrary.pixellate(.float(10)), maxSampleOffset: .zero)

This code produces the instance on the static picture nevertheless what I would like is to use this impact to no matter is behind.

Instance utilization:

And to be able to describe what I really need right here is the Figma illustration of what I need to implement
To be able to perceive I recomend looking on the picture

Desired Consequence:

Once more I need to reuse this impact on many locations so I do not likely need to apply this to particular person view inside content material I consider there must be less-complex technique to obtain this.

To be clear once more, my downside is:

I need to apply "my shader" to the View; nevertheless, I would like it to control/distort the content material behind it. That half is vital

I attempted to use the impact on to .ultraThinMaterial nevertheless it didn’t labored