How can I make scrollview content vertically centered at the top and bottom, as well as scale content down as it gets farther from the center?

Question

Here is what I would like to do: I would like to make a scrollview in my app where when the user scrolls all the way to the top, the top content is exactly in the middle of the view, same thing for the bottom. I've tried adding spacer before and after the content, but I kind of just have to eyeball it to try and get it in the middle of the view and was hoping there was a better way. I would also like for the content in the middle of the screen to be normal sized and normal transparency, with other content above and below it fading and getting smaller the farther from the center they get. Something like this: Figma Example

I also want the content to kind of snap to the center, although I already found a way to do that with .scrollTargetBehavior()

I've tried using some animations, but I couldn't figure out how to make it do what I wanted. Here is the basic scrollview and content:

ScrollView(showsIndicators: false) {
  ZStack {
    VStack (spacing: 15) {
      Spacer(minLength: 250)
      ForEach(items) {item in
        Button(action: {
           // Do Stuff
        }) {
          ZStack {
            RoundedRectangle(cornerRadius: 25)
              .fill(Color.col5)
          } 
        }
          .frame(height: 100)
      }
      Spacer(minLength: 250)
    }
      .scrollTargetLayout()
  }
}
  .scrollTargetBehavior(.viewAligned)
  .padding(.horizontal, 50)
  .frame(height:500)

Is there any way to do what I'm asking? Thank you!

Edit: I've tried Using the .scaleEffect(phase.isIdentity ? 1 : 0.3), but that doesn't get what I need because it both effects all the content not near the top and bottom, and doesn't allow me to have each content at a different scale based on it's position.