WWDC26 · 18 min · Design / SwiftUI & UI Frameworks

Compose advanced graphics effects with SwiftUI

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.

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

0:00 — Introduction
1:40 — Design breakdown
4:11 — Cover art and shader effects
11:07 — Driving animation with time
12:00 — Time-synced transcript view
13:18 — Floating timestamps with alignment guides
16:16 — Creative pipelines
17:13 — Next steps

Code shown on screen · 17 snippets

Cover art image swift · at 4:18 ↗

Image("CoverArt")

Blurred cover art image swift · at 4:24 ↗

Image("CoverArt")
    .blur(radius: 30)

Applying layer effect in SwiftUI swift · at 7:09 ↗

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

Writing layer effect shader in Metal cpp · at 7:21 ↗

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer
) {
    return layer.sample(position);
}

Metal shader with offset parameter cpp · at 7:39 ↗

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 offset
) {
    return layer.sample(position + offset);
}

SwiftUI layer effect with offset parameter swift · at 7:55 ↗

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
               .float2(.init(x: 0, y: 0))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

SwiftUI layer effect with full-width offset swift · at 8:04 ↗

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
               .float2(.init(x: proxy.size.width, y: 0))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

SwiftUI layer effect with noise sampling swift · at 8:37 ↗

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture"))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

Metal shader with noise sampling cpp · at 8:55 ↗

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 size, texture2d<half> noiseTex
) {
    constexpr sampler s(address::repeat, filter::linear);
    float2 uv = position / size;

    half4 n = noiseTex.sample(s, uv);
    float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;

    return layer.sample(position + offset);
}

Metal shader with domain warping cpp · at 10:22 ↗

[[stitchable]] half4 backgroundWarp(
    float2 position, SwiftUI::Layer layer,
    float2 size, texture2d<half> noiseTex
) {
    constexpr sampler s(address::repeat, filter::linear);
    float2 uv = position / size;

    half4 n = noiseTex.sample(s, uv);

    float2 q = float2(n.r, n.g);
    n = noiseTex.sample(s, uv + q);

    float2 offset = (float2(n.r, n.g) - 0.5) * 200.0;

    return layer.sample(position + offset);
}

SwiftUI layer effect with static visual swift · at 11:16 ↗

GeometryReader { proxy in
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture"))
            ),
            maxSampleOffset: .zero
        )
}
.ignoresSafeArea()

SwiftUI layer effect with animated visual swift · at 11:37 ↗

@State private var startDate = Date.now

TimelineView(.animation) { timeline in
    let elapsed = timeline.date.timeIntervalSince(
        startDate
    )
    CoverArtView()
        .layerEffect(
            ShaderLibrary.backgroundWarp(
                .float2(proxy.size),
                .image(Image("NoiseTexture")),
                .float(elapsed)
            ),
            maxSampleOffset: .zero
        )
}

Basic transcript view swift · at 12:15 ↗

ScrollView {
    LazyVStack(alignment: .leading, spacing: 12) {
        ForEach(sampleTranscript) { line in
                .font(.title)
                .fontWeight(.bold)
        }
    }
}

Time-synced transcript view swift · at 12:33 ↗

@State private var playback = PlaybackState()

ScrollViewReader { scrollProxy in
    ScrollView {
        LazyVStack(alignment: .leading, spacing: 12) {
            ForEach(sampleTranscript) { line in
                Text(line.text)
                    .transcriptLineStyle(isCurrent: 
                        line.id == playback.currentLineIndex
                    )
            }
        }
    }
    .onChange(of: playback.currentLineIndex, { _, i in
        scrollProxy.scrollTo(i, anchor: .center)
    })
}

Overlay with center alignment swift · at 13:53 ↗

Text(line.text)
     .overlay {
          Text(line.formattedTimestamp)
     }

Overlay with bottom leading alignment swift · at 14:06 ↗

Text(line.text)
     .overlay(alignment: .bottomLeading) {
          Text(line.formattedTimestamp)
     }

Overlay with alignment guide override swift · at 14:32 ↗

Text(line.text)
     .overlay(alignment: .bottomLeading) {
          Text(line.formattedTimestamp)
              .alignmentGuide(.bottom) { $0[.top] }
     }

Resources

Documentation Alignment
Sample code Composing advanced graphics effects with SwiftUI
Documentation Shader

Create custom visual effects with SwiftUI

WWDC24 · 10 snippets

26 min

Chapters

Code shown on screen · 17 snippets

Resources

Related sessions

Create custom visual effects with SwiftUI