I am writing a program that has some images where you can scroll through and I also have a rectangle-like view that is called PixeleteView where I want to pixelate the content behind, it is easy to apply my shader to the view and work however I want to pixelate the images below without applying my shader to the images.

What I mean is that I want to apply an effect just like blur or some sort however on the background content of the current view meaning taking the background content redrawing it in the current background and applying the effect to it or this is what a I initially thought however I couldn't do that.

I am new to Swift and tried several things and coudn't find a working solution not even partially.

// ContentView

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

Content is just a scrollable images and texts, however it can be anything.

Inside my PixeleteView I want to apply my shader

// PixeleteView

struct PixeleteView: View {
    var body: some View {
       .
       .
       .
       .background(
        
        //
        // This is where I want my shader to be
        // However instead of this it must change the background of 
        // this view.
        //
        // You can think of this like
        // Rectangle()
        //    .fill(.ultraThinMaterial)
        //
       )
       .clipShape(RoundedRectangle(cornerRadius: 50))
    }

And my shader is jsut a simple metal file to pixelete the content With .layerEffect applied to

// MySahder.metal

#include 
#include 
using namespace metal;


[[ stitchable ]] half4 pixellate(float2 position, SwiftUI::Layer layer, float strength) {
    float min_strength = max(strength, 0.0001);
    float coord_x = min_strength * round(position.x / min_strength);
    float coord_y = min_strength * round(position.y / min_strength);
    return layer.sample(float2(coord_x, coord_y));
}

So I believe I could bring the idea of what I am trying to do instead of using Rectangle().fill(.ultraThinMaterial) I want to implement my own effect

Here is an example when I run this

// Example

Image(systemName: "figure.run.circle.fill")
    .font(.system(size: 300))
    .layerEffect(ShaderLibrary.pixellate(.float(10)), maxSampleOffset: .zero)

This code produces the example on the static image however what I want is to apply this effect to whatever is behind.

Example usage:

And in order to describe what I really want here is the Figma representation of what I want to implement In order to understand I recomend taking a look at the image

Desired Result:

Again I want to reuse this effect on many places so I do not really want to apply this to individual view inside content I believe there has to be less-complex way to achieve this.

To be clear again, my problem is:

I want to apply "my shader" to the View; however, I want it to manipulate/distort the content behind it. That part is important

I tried to apply the effect directly to .ultraThinMaterial however it did not worked