{ "$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/session.schema.json", "schemaVersion": 1, "id": "wwdc2026-322", "event": "wwdc2026", "eventName": "WWDC26", "year": 2026, "eventContentId": 322, "title": "Compose advanced graphics effects with SwiftUI", "description": "Discover how to craft rich, custom experiences by creatively composing SwiftUI layout and graphics APIs. We’ll show you how to break down complex designs and use a creative pipeline to chain simple building blocks together. Learn how to draw with layer shaders, animate with timelines, and anchor views with alignment guides.", "url": "https://developer.apple.com/videos/play/wwdc2026/322", "sosumiURL": "https://sosumi.ai/videos/play/wwdc2026/322", "type": "Video", "publishedAt": "2026-06-08T14:00:00-07:00", "platforms": [ "iOS", "iPadOS", "macOS", "tvOS", "visionOS", "watchOS" ], "keywords": [ "screenshots" ], "topics": [ "Design", "SwiftUI & UI Frameworks" ], "primaryTopic": "SwiftUI & UI Frameworks", "duration": 1075, "hasTranscript": true, "transcriptWordCount": 2095, "availableLanguages": [ "eng", "fra", "jpn", "kor", "por", "spa", "zho" ], "media": { "hls": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/322/4/db4c622a-2091-45ef-a024-df317a5b55a5/cmaf.m3u8", "downloadHLS": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/322/4/db4c622a-2091-45ef-a024-df317a5b55a5/cmaf-download.m3u8", "downloadSD": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/322/4/db4c622a-2091-45ef-a024-df317a5b55a5/downloads/wwdc2026-322_sd.mp4", "downloadHD": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/322/4/db4c622a-2091-45ef-a024-df317a5b55a5/downloads/wwdc2026-322_hd.mp4", "duration": 1075 }, "codeSnippets": [ { "title": "Cover art image", "language": "swift", "startTimeSeconds": 258, "code": "Image(\"CoverArt\")" }, { "title": "Blurred cover art image", "language": "swift", "startTimeSeconds": 264, "code": "Image(\"CoverArt\")\n .blur(radius: 30)" }, { "title": "Applying layer effect in SwiftUI", "language": "swift", "startTimeSeconds": 429, "code": "GeometryReader { proxy in\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(),\n maxSampleOffset: .zero\n )\n}\n.ignoresSafeArea()" }, { "title": "Writing layer effect shader in Metal", "language": "cpp", "startTimeSeconds": 441, "code": "[[stitchable]] half4 backgroundWarp(\n float2 position, SwiftUI::Layer layer\n) {\n return layer.sample(position);\n}" }, { "title": "Metal shader with offset parameter", "language": "cpp", "startTimeSeconds": 459, "code": "[[stitchable]] half4 backgroundWarp(\n float2 position, SwiftUI::Layer layer,\n float2 offset\n) {\n return layer.sample(position + offset);\n}" }, { "title": "SwiftUI layer effect with offset parameter", "language": "swift", "startTimeSeconds": 475, "code": "GeometryReader { proxy in\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(\n .float2(.init(x: 0, y: 0))\n ),\n maxSampleOffset: .zero\n )\n}\n.ignoresSafeArea()" }, { "title": "SwiftUI layer effect with full-width offset", "language": "swift", "startTimeSeconds": 484, "code": "GeometryReader { proxy in\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(\n .float2(.init(x: proxy.size.width, y: 0))\n ),\n maxSampleOffset: .zero\n )\n}\n.ignoresSafeArea()" }, { "title": "SwiftUI layer effect with noise sampling", "language": "swift", "startTimeSeconds": 517, "code": "GeometryReader { proxy in\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(\n .float2(proxy.size),\n .image(Image(\"NoiseTexture\"))\n ),\n maxSampleOffset: .zero\n )\n}\n.ignoresSafeArea()" }, { "title": "Metal shader with noise sampling", "language": "cpp", "startTimeSeconds": 535, "code": "[[stitchable]] half4 backgroundWarp(\n float2 position, SwiftUI::Layer layer,\n float2 size, texture2d noiseTex\n) {\n constexpr sampler s(address::repeat, filter::linear);\n float2 uv = position / size;\n\n half4 n = noiseTex.sample(s, uv);\n float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;\n\n return layer.sample(position + offset);\n}" }, { "title": "Metal shader with domain warping", "language": "cpp", "startTimeSeconds": 622, "code": "[[stitchable]] half4 backgroundWarp(\n float2 position, SwiftUI::Layer layer,\n float2 size, texture2d noiseTex\n) {\n constexpr sampler s(address::repeat, filter::linear);\n float2 uv = position / size;\n\n half4 n = noiseTex.sample(s, uv);\n\n float2 q = float2(n.r, n.g);\n n = noiseTex.sample(s, uv + q);\n\n float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;\n\n return layer.sample(position + offset);\n}" }, { "title": "SwiftUI layer effect with static visual", "language": "swift", "startTimeSeconds": 676, "code": "GeometryReader { proxy in\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(\n .float2(proxy.size),\n .image(Image(\"NoiseTexture\"))\n ),\n maxSampleOffset: .zero\n )\n}\n.ignoresSafeArea()" }, { "title": "SwiftUI layer effect with animated visual", "language": "swift", "startTimeSeconds": 697, "code": "@State private var startDate = Date.now\n\nTimelineView(.animation) { timeline in\n let elapsed = timeline.date.timeIntervalSince(\n startDate\n )\n CoverArtView()\n .layerEffect(\n ShaderLibrary.backgroundWarp(\n .float2(proxy.size),\n .image(Image(\"NoiseTexture\")),\n .float(elapsed)\n ),\n maxSampleOffset: .zero\n )\n}" }, { "title": "Basic transcript view", "language": "swift", "startTimeSeconds": 735, "code": "ScrollView {\n LazyVStack(alignment: .leading, spacing: 12) {\n ForEach(sampleTranscript) { line in\n .font(.title)\n .fontWeight(.bold)\n }\n }\n}" }, { "title": "Time-synced transcript view", "language": "swift", "startTimeSeconds": 753, "code": "@State private var playback = PlaybackState()\n\nScrollViewReader { scrollProxy in\n ScrollView {\n LazyVStack(alignment: .leading, spacing: 12) {\n ForEach(sampleTranscript) { line in\n Text(line.text)\n .transcriptLineStyle(isCurrent: \n line.id == playback.currentLineIndex\n )\n }\n }\n }\n .onChange(of: playback.currentLineIndex, { _, i in\n scrollProxy.scrollTo(i, anchor: .center)\n })\n}" }, { "title": "Overlay with center alignment", "language": "swift", "startTimeSeconds": 833, "code": "Text(line.text)\n .overlay {\n Text(line.formattedTimestamp)\n }" }, { "title": "Overlay with bottom leading alignment", "language": "swift", "startTimeSeconds": 846, "code": "Text(line.text)\n .overlay(alignment: .bottomLeading) {\n Text(line.formattedTimestamp)\n }" }, { "title": "Overlay with alignment guide override", "language": "swift", "startTimeSeconds": 872, "code": "Text(line.text)\n .overlay(alignment: .bottomLeading) {\n Text(line.formattedTimestamp)\n .alignmentGuide(.bottom) { $0[.top] }\n }" } ], "resources": [ { "title": "Alignment", "url": "https://developer.apple.com/documentation/SwiftUI/Alignment", "type": "documentation", "description": "An alignment in both axes.", "sosumiURL": "https://sosumi.ai/documentation/SwiftUI/Alignment", "doccJSON": "https://developer.apple.com/tutorials/data/documentation/SwiftUI/Alignment.json" }, { "title": "Composing advanced graphics effects with SwiftUI", "url": "https://developer.apple.com/documentation/SwiftUI/Composing-advanced-graphics-effects-with-SwiftUI", "type": "samplecode", "description": "Create compelling visuals in your app by combining graphical effects.", "sosumiURL": "https://sosumi.ai/documentation/SwiftUI/Composing-advanced-graphics-effects-with-SwiftUI", "doccJSON": "https://developer.apple.com/tutorials/data/documentation/SwiftUI/Composing-advanced-graphics-effects-with-SwiftUI.json" }, { "title": "Shader", "url": "https://developer.apple.com/documentation/SwiftUI/Shader", "type": "documentation", "description": "A reference to a function in a Metal shader library, along with its", "sosumiURL": "https://sosumi.ai/documentation/SwiftUI/Shader", "doccJSON": "https://developer.apple.com/tutorials/data/documentation/SwiftUI/Shader.json" } ], "path": "sessions/wwdc2026/322-compose-advanced-graphics-effects-with-swiftui/", "files": { "metadata": "sessions/wwdc2026/322-compose-advanced-graphics-effects-with-swiftui/metadata.json", "readme": "sessions/wwdc2026/322-compose-advanced-graphics-effects-with-swiftui/README.md", "transcript": "sessions/wwdc2026/322-compose-advanced-graphics-effects-with-swiftui/transcript.md", "transcriptJSON": "sessions/wwdc2026/322-compose-advanced-graphics-effects-with-swiftui/transcript.json" } }