{"id":6249,"date":"2025-08-28T06:39:35","date_gmt":"2025-08-28T10:39:35","guid":{"rendered":"https:\/\/stepinto.vision\/?p=6249"},"modified":"2025-08-28T06:42:00","modified_gmt":"2025-08-28T10:42:00","slug":"spatial-swiftui-presentation-breakthrough-effect","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-presentation-breakthrough-effect\/","title":{"rendered":"Spatial SwiftUI: Presentation Breakthrough Effect"},"content":{"rendered":"\n<p>We can use this new modifier to override the system default breakthrough effect for presentations.<\/p>\n\n\n\n<p>We learned how to use <a href=\"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-breakthrough-effect\/\" data-type=\"post\" data-id=\"6235\">Breakthrough Effect<\/a> to make sure our SwiftUI content stays visible. Presentations will use breakthrough effects by default in most cases. If we want to remove or customize the effects, we can use <code><a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/presentationbreakthrougheffect(_:)\">presentationBreakthroughEffect<\/a><\/code>. <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>fileprivate struct EarthCard: View {\n    var body : some View {\n        VStack {\n            Text(\"Earth\")\n                .font(.title)\n            Text(\"The only known planet known to serve ice cream.\")\n                .font(.caption)\n        }\n        .padding()\n        .presentationBreakthroughEffect(.prominent)\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">fileprivate<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">EarthCard<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body : some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        VStack {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;The only known planet known to serve ice cream.&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">caption<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">presentationBreakthroughEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">prominent<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The list of effects are the same as <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/breakthrougheffect(_:)\">breakthroughEffect<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>automatic: let visionOS decide in an effect should be applied (default even when not using this modifier)<\/li>\n\n\n\n<li>none: never apply an effect<\/li>\n\n\n\n<li>subtle: apply a subtle effect<\/li>\n\n\n\n<li>prominent: apply a prominent effect<\/li>\n<\/ul>\n\n\n\n<p>This effect works much the same way as <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/breakthrougheffect(_:)\">breakthroughEffect<\/a>. We can use that to add effects to view. We can use <code><a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/presentationbreakthrougheffect(_:)\">presentationBreakthroughEffect<\/a><\/code> to remove or customize effects from presented views.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Demo<\/h2>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <div class=\"jetpack-video-wrapper\"><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='720' height='405' src='https:\/\/videopress.com\/embed\/oG1Dn7jL?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<h2 class=\"wp-block-heading\">Example Code<\/h2>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>fileprivate struct EarthCard: View {\n\n    @Binding var effect: BreakthroughEffect\n\n    var body : some View {\n        VStack {\n            Text(\"Earth\")\n                .font(.title)\n            Text(\"The only known planet known to serve ice cream.\")\n                .font(.caption)\n        }\n        .padding()\n        .presentationBreakthroughEffect(effect)\n    }\n\n}\n\nstruct Example099: View {\n\n    @State private var effect: BreakthroughEffect = .none\n    @State private var showingPopover: Bool = false\n\n    var body: some View {\n        VStack {\n            Spacer()\n            RealityView { content in\n\n                guard let scene = try? await Entity(named: \"PresentingEarth\", in: realityKitContentBundle) else { return }\n                content.add(scene)\n                guard let subject = scene.findEntity(named: \"Earth\") else { return }\n                guard let moon = scene.findEntity(named: \"Moon\") else { return }\n                moon.components.set(ManipulationComponent())\n\n\n                \/\/ A secondary entity that we can use as the transform point for the presented popover\n                guard let presentationPoint = scene.findEntity(named: \"PresentationPoint\") else { return }\n\n                \/\/ We'll use a TapGesture and the new GestureComponent to toggle the popover\n                let tapGesture = TapGesture()\n                    .onEnded({\n                        Entity.animate(.bouncy, body: {\n                            showingPopover.toggle()\n                        })\n                    })\n                let gestureComponent = GestureComponent(tapGesture)\n                subject.components.set(gestureComponent)\n\n                \/\/ Create the presentation component using $showingPopover to toggle presentation\n                let presentation = PresentationComponent(\n                    isPresented: $showingPopover,\n                    configuration: .popover(arrowEdge: .bottom),\n                    content: EarthCard(effect: $effect)\n                )\n                presentationPoint.components.set(presentation)\n\n            }\n            .realityViewLayoutBehavior(.fixedSize)\n        }\n        \/\/ Controls to modify the example\n        .ornament(attachmentAnchor: .scene(.bottomTrailing), contentAlignment: .bottomTrailing, ornament: {\n            VStack(alignment: .center, spacing: 8) {\n                Button(action: {\n                    withAnimation {\n                        effect = .none\n                    }\n                }, label: {\n                    Text(\"None\")\n                })\n                Button(action: {\n                    withAnimation {\n                        effect = .subtle\n                    }\n                }, label: {\n                    Text(\"Subtle\")\n                })\n                Button(action: {\n                    withAnimation {\n                        effect = .prominent\n                    }\n                }, label: {\n                    Text(\"Prominent\")\n                })\n\n            }\n            .padding()\n            .controlSize(.extraLarge)\n            .glassBackgroundEffect()\n\n        })\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">fileprivate<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">EarthCard<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@Binding<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> effect: BreakthroughEffect<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body : some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        VStack {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;The only known planet known to serve ice cream.&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">caption<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">presentationBreakthroughEffect<\/span><span style=\"color: #000000\">(effect)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">Example099<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> effect: BreakthroughEffect = .<\/span><span style=\"color: #001080\">none<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> showingPopover: <\/span><span style=\"color: #267F99\">Bool<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">false<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body: some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        VStack {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Spacer<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            RealityView { content <\/span><span style=\"color: #AF00DB\">in<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #AF00DB\">guard<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> scene = <\/span><span style=\"color: #AF00DB\">try<\/span><span style=\"color: #000000\">? <\/span><span style=\"color: #AF00DB\">await<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">Entity<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">named<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;PresentingEarth&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">in<\/span><span style=\"color: #000000\">: realityKitContentBundle) <\/span><span style=\"color: #AF00DB\">else<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                content.<\/span><span style=\"color: #795E26\">add<\/span><span style=\"color: #000000\">(scene)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #AF00DB\">guard<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> subject = scene.<\/span><span style=\"color: #795E26\">findEntity<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">named<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">) <\/span><span style=\"color: #AF00DB\">else<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #AF00DB\">guard<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> moon = scene.<\/span><span style=\"color: #795E26\">findEntity<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">named<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;Moon&quot;<\/span><span style=\"color: #000000\">) <\/span><span style=\"color: #AF00DB\">else<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                moon.<\/span><span style=\"color: #001080\">components<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">set<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">ManipulationComponent<\/span><span style=\"color: #000000\">())<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #008000\">\/\/ A secondary entity that we can use as the transform point for the presented popover<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #AF00DB\">guard<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> presentationPoint = scene.<\/span><span style=\"color: #795E26\">findEntity<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">named<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;PresentationPoint&quot;<\/span><span style=\"color: #000000\">) <\/span><span style=\"color: #AF00DB\">else<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #008000\">\/\/ We&#39;ll use a TapGesture and the new GestureComponent to toggle the popover<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> tapGesture = <\/span><span style=\"color: #795E26\">TapGesture<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">onEnded<\/span><span style=\"color: #000000\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        Entity.<\/span><span style=\"color: #795E26\">animate<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">bouncy<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">body<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                            showingPopover.<\/span><span style=\"color: #795E26\">toggle<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> gestureComponent = <\/span><span style=\"color: #795E26\">GestureComponent<\/span><span style=\"color: #000000\">(tapGesture)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                subject.<\/span><span style=\"color: #001080\">components<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">set<\/span><span style=\"color: #000000\">(gestureComponent)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #008000\">\/\/ Create the presentation component using $showingPopover to toggle presentation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> presentation = <\/span><span style=\"color: #795E26\">PresentationComponent<\/span><span style=\"color: #000000\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">isPresented<\/span><span style=\"color: #000000\">: $showingPopover,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">configuration<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #795E26\">popover<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">arrowEdge<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">bottom<\/span><span style=\"color: #000000\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">content<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #795E26\">EarthCard<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">effect<\/span><span style=\"color: #000000\">: $effect)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                presentationPoint.<\/span><span style=\"color: #001080\">components<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">set<\/span><span style=\"color: #000000\">(presentation)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">realityViewLayoutBehavior<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">fixedSize<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Controls to modify the example<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">ornament<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">attachmentAnchor<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #795E26\">scene<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">bottomTrailing<\/span><span style=\"color: #000000\">), <\/span><span style=\"color: #795E26\">contentAlignment<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">bottomTrailing<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">ornament<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">VStack<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">alignment<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">center<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">spacing<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">8<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    withAnimation {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        effect = .<\/span><span style=\"color: #001080\">none<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;None&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    withAnimation {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        effect = .<\/span><span style=\"color: #001080\">subtle<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Subtle&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    withAnimation {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                        effect = .<\/span><span style=\"color: #001080\">prominent<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Prominent&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">controlSize<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">extraLarge<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We can use this new modifier to override the system default breakthrough effect for presentations.<\/p>\n","protected":false},"author":93705089,"featured_media":6250,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[1365],"tags":[],"class_list":["post-6249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-example-code"],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":1365,"label":"Example Code"}]},"featured_image_src_large":["https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/08\/step-example-099-01.jpeg?fit=1024%2C576&ssl=1",1024,576,true],"author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/stepinto.vision\/author\/vrhermit\/"},"comment_info":0,"category_info":[{"term_id":1365,"name":"Example Code","slug":"example-code","term_group":0,"term_taxonomy_id":11,"taxonomy":"category","description":"Code snippets and examples of using common APIs throughout visionOS development","parent":0,"count":187,"filter":"raw","cat_ID":1365,"category_count":187,"category_description":"Code snippets and examples of using common APIs throughout visionOS development","cat_name":"Example Code","category_nicename":"example-code","category_parent":0}],"tag_info":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/08\/step-example-099-01.jpeg?fit=1920%2C1080&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/users\/93705089"}],"replies":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/comments?post=6249"}],"version-history":[{"count":8,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6249\/revisions"}],"predecessor-version":[{"id":6261,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6249\/revisions\/6261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media\/6250"}],"wp:attachment":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media?parent=6249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/categories?post=6249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/tags?post=6249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}