I’d like to have a button that shows a image in a parallax effect with text overlay.

Since on VisionPro we cannot track user position, I want to do this with static declaration and z-depth distance. So parallax is real 3D of an image peaking through the keyhole of the button frame.

I have found that I can acheve the depth using transform3DEffect with a z translation.
I have also found that if I push any content to negative Z relative to its window it will be blurred behind the glass background of the window.
So I have moved toward pulling the button collection forward in Z then pushing the button backgound image back to the normal window z zero depth.

Now since the image needs to present larger than the button portal it is seen through I increased its frame size and made is resizable. Further, I set clipping on the button portal frame.

Unfortunately, The image is not getting clipped to the bounds of the button portal frame. I assume this is because the clipping is unaware of the 3D prospective. So I’m thinking of looking into adjusting the image frame/clipping based on GeometryReader on the button portal frame and transforming that into the background image frame/clipping.

I have not explored overlay and background approaches as I suspect they are convenience wrappers on ZStack anyway.

I’m very open to suggestions and feedback.

Here are a series of images the red representing where the button should clip the background image.

Here is a visual diagram of the intended layout.

Here is code for one of the variations I explored.

        Button(action: {
            print("pressed")
        }, label: {
            ZStack {
                ZStack {
                    Image("image1")
                        .resizable()
                        .scaledToFill()
                }
                .frame(width: 100, height: 200)
                .transform3DEffect( AffineTransform3D(translation: Vector3D(z:-50.0)))
                .clipped()


                VStack {
                    Text("The Game")
                        .bold()
                    Text("12:00 PM")
                        .font(.system(size: 12))

                }
                .frame( alignment: .bottomLeading)
                .border(Color.green, width: 2)
            }
            .frame(width: 100, height: 100)
            .compositingGroup()
            .clipped()
            .border(Color.red, width: 2)
            .transform3DEffect( AffineTransform3D(translation: Vector3D(z:50.0)))
        })
        .buttonStyle(PlainButtonStyle())

Also, Is there a repo of SwiftUI available to read through? It would be much faster than experimenting.