Exploring visionOS: hoverEffect

I am updating my app, Gradient Game for Apple Vision Pro, which looks amazing on a beautiful glass background and a chef kiss interaction when dragging sliders. The goal is to make the interaction with the elements feel more native to the platform.

Updating from iOS to visionOS

One of the first things I noticed when using my app on Vision Pro was the interaction with the main screen's grid options. I had two different options for the grid, but the interaction with the element felt a bit off. The first challenge I encountered was the shape of the interaction with the elements, which felt like an oval on visionOS. This looked ugly on the glass background and far from native to this platform.

If I remove the button style as plain by commenting out .buttonStyle(.plain), it provides the button as a capsule, which looks worse on the glass background with the current design:

Native visionOS

To solve this, I used the hoverEffect modifier to create a better hover effect for the platform.

Here's the original code for the HomeViewGridItem:

struct HomeViewGridItem: View {
  var type: HomeViewGridItemType
  var action: () -> ()

  var body: some View {
    Button(action: action) {
      VStack(spacing: 16) {
        HStack(spacing: 12) {
        ///
      }
      .foregroundStyle(LinearGradient.primary)
      .padding(.vertical)
      .frame(maxWidth: .infinity, alignment: .center)
      .padding()
      .padding(.vertical)
      .overlay(RoundedRectangle(cornerRadius: 16).stroke(LinearGradient.primary, lineWidth: 2))
            .contentShape(Rectangle())
      .contentShape(Rectangle())
    }
    .buttonStyle(.plain)
  }
}

After

Here's the updated code with the hoverEffect modifier:

struct HomeViewGridItem: View {
  var type: HomeViewGridItemType
  var action: () -> ()

  var body: some View {
    Button(action: action) {
      VStack(spacing: 16) {
        HStack(spacing: 12) {
        ///
      }
      .foregroundStyle(LinearGradient.primary)
      .padding(.vertical)
      .frame(maxWidth: .infinity, alignment: .center)
      .padding()
      .padding(.vertical)
      .overlay(RoundedRectangle(cornerRadius: 16).stroke(LinearGradient.primary, lineWidth: 2))
      .padding(8)
      .contentShape(RoundedRectangle(cornerRadius: 24))
      .hoverEffect()
    }
    .buttonStyle(.plain)
  }
}

I added some padding and a rounded rectangle with a bigger corner radius to make the hover effect more noticeable. This created a nice visual effect when hovering over the elements.

.padding(8)
.contentShape(RoundedRectangle(cornerRadius: 24))
.hoverEffect()

The interaction now feels much more native to the visionOS platform!