How it works
BreakthroughEffect describes how immersive content visually pushes past the bounds of its glass surface and into the surrounding space in visionOS. Windows and volumes are normally clipped to their material backing, but some experiences need an element to read as if it physically emerges from the panel rather than sitting flatly behind it. Reach for BreakthroughEffect when you want content rendered on a glass background to break through that surface, lending depth to immersive panels and reinforcing the sense that the interface occupies real space.
Anchor the content on a glass surface with glassBackgroundEffect()
A breakthrough effect operates against a material backing, so the content first needs one. The
VStackcarrying theText("Immersive Panel")headline and its subheadline is given a glass surface by.glassBackgroundEffect(), establishing the pane that the effect can then reach beyond.Apply the BreakthroughEffect to the view that should emerge
BreakthroughEffectis a value type that you configure and attach to the view meant to extend past the glass. You hand it to the subject view — here the paddedVStackpanel — so SwiftUI renders that view as breaking through the surface created byglassBackgroundEffect()rather than clipping it to the panel's edge.Control where the effect sits in the layout with padding
Because the effect projects content outward, the space around the panel matters. The inner
.padding(24)shapes the glass pane itself, while the trailing.padding()reserves room in the surrounding scene so the breaking-through content has somewhere to extend into without colliding with neighboring views.Keep the broken-through content legible
Content that emerges from glass is read against varying depths, so styling stays deliberate. The
.font(.headline)and.font(.subheadline)choices, the.foregroundStyle(.secondary)on the descriptive line, and.multilineTextAlignment(.center)keep theTextelements readable as they sit forward of the panel surface.
.glassBackgroundEffect() modifier and the panel loses the surface there is nothing for the content to break through, showing that the effect is defined relative to its glass backing.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct BreakthroughEffectDemo: View {
var body: some View {
VStack(spacing: 12) {
Text("Immersive Panel")
.font(.headline)
Text("Content can break through the glass into the surrounding space.")
.font(.subheadline)
.foregroundStyle(.secondary)
.multilineTextAlignment(.center)
}
.padding(24)
.glassBackgroundEffect()
.padding()
}
}