Spatial SwiftUI: Breakthrough Effect
We can use this new modifier to keep content visible even when it is blocked other views or content.
Have you ever had a SwiftUI view in a window or volume that gets blocked by something else? This often happens in Volume-based apps with ornaments or attachments. The new breakthroughEffect modifier in visionOS 26 solves this by making sure content stays visible. Add the modifier to a view and select an effect.
VStack {
Text("Earth")
.font(.title)
Text("The only known planet known to serve ice cream.")
.font(.caption)
}
.breakthroughEffect(.prominent)The options for effect are
- automatic: let visionOS decide in an effect should be applied (default even when not using this modifier)
- none: never apply an effect
- subtle: apply a subtle effect
- prominent: apply a prominent effect
I’ve found a number of uses for the prominent effect throughout the summer. visionOS is pretty smart when applying these effects. It seems to consider how the views intersect combined with the orientation of the user.
In this example, we use a simple Spatial Layout to have two objects occupy the same space. We add the modifier to the 2D card. We could also use this for SwiftUI views in attachments and ornaments.
Note: make sure you try this on a real device. There has been a known issue in the visionOS Beta release notes that this feature does not work in the Simulator.
Video Demo
Example Code
struct Example098: View {
@State private var effect: BreakthroughEffect = .none
var body: some View {
VStack {
Spacer()
SpatialContainer {
ModelViewSimple(name: "Earth", bundle: realityKitContentBundle)
.frame(width: 400, height: 400)
.manipulable()
VStack {
Text("Earth")
.font(.title)
Text("The only known planet known to serve ice cream.")
.font(.caption)
}
.padding()
.background(.black)
.cornerRadius(24)
.shadow(radius: 20)
.frame(width: 220, height: 160)
.breakthroughEffect(effect)
}
}
// Controls to modify the example
.ornament(attachmentAnchor: .scene(.bottomTrailing), contentAlignment: .bottomTrailing, ornament: {
VStack(alignment: .center, spacing: 8) {
Button(action: {
withAnimation {
effect = .none
}
}, label: {
Text("None")
})
Button(action: {
withAnimation {
effect = .subtle
}
}, label: {
Text("Subtle")
})
Button(action: {
withAnimation {
effect = .prominent
}
}, label: {
Text("Prominent")
})
}
.padding()
.controlSize(.extraLarge)
.glassBackgroundEffect()
})
}
}Support our work so we can continue to bring you new examples and articles.
Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.
Follow Step Into Vision