Liquid glass in SwiftUI

Text("Continue").padding(.horizontal, 20).padding(.vertical, 12)
  .glassEffect()                                              // .regular in a capsule

Label("Share", systemImage: "square.and.arrow.up")
  .padding()
  .glassEffect(.regular.tint(.accentColor).interactive(), in: .rect(cornerRadius: 24, style: .continuous))

Button("Buy") { }.buttonStyle(.glassProminent)               // tint material
Button("Later") { }.buttonStyle(.glass)                      // regular

/// Bodies in one container merge (morph) when closer than `spacing`; with `glassEffectID` a body that appears
/// grows out of its neighbour instead of fading in.
struct Tools: View {
  @Namespace private var ns
  @State private var expanded = false

  var body: some View {
    GlassEffectContainer(spacing: 16) {
      HStack(spacing: 16) {
        Button { withAnimation(.bouncy) { expanded.toggle() } } label: {
          Image(systemName: "pencil").frame(width: 44, height: 44)   // 44 pt target; a bare glyph is ~22 pt
        }
        .glassEffect(.regular.interactive())
        .glassEffectID("pencil", in: ns)
        if expanded {
          Button { } label: { Image(systemName: "eraser").frame(width: 44, height: 44) }
            .glassEffect(.regular.interactive())
            .glassEffectID("eraser", in: ns)
        }
      }
    }
  }
}

TabView {
  Tab("Library", systemImage: "square.stack") { LibraryView() }
  Tab("Radio", systemImage: "dot.radiowaves.left.and.right") { RadioView() }
  Tab(role: .search) { SearchView() }                        // the separate search lens
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory { MiniPlayer() }                     // mini player above the bar

MapView().sheet(isPresented: $showDetails) {
  DetailsView().presentationDetents([.medium, .large])       // floating glass sheet
}

let metal = AngularGradient(stops: [
  .init(color: Color(white: 0.08), location: 0.00), .init(color: Color(white: 0.97), location: 0.10),
  .init(color: Color(white: 0.55), location: 0.30), .init(color: .white, location: 0.45),
  .init(color: Color(white: 0.17), location: 0.55), .init(color: Color(white: 0.86), location: 0.70),
  .init(color: Color(white: 0.08), location: 0.81), .init(color: Color(white: 0.97), location: 0.92),
], center: .center, angle: .degrees(200))

Button { } label: { Label("Ask", systemImage: "sparkles").padding(.horizontal, 22).padding(.vertical, 13) }
  .buttonStyle(.plain)
  .foregroundStyle(Color(white: 0.96))                          // the face is dark in both themes
  .background(Capsule().fill(Color(white: 0.05)))
  .overlay(Capsule().strokeBorder(metal, lineWidth: 3))

/// A short arc of light travelling along `shape` at constant speed (trimmed path, not a rotating gradient).
struct BorderBeam<S: Shape>: View {
  var shape: S
  var lap: Double = 5              // seconds per lap: 4–6 buttons, 6–10 cards, 2–3 while working
  var tail: CGFloat = 0.25         // fraction of the perimeter
  var width: CGFloat = 1.5         // = rim width
  var color: Color = .white        // accent on light glass
  var bloom: CGFloat = 4           // blur radius of the glow copy; 0 = none
  var start: CGFloat = 0           // 0.5 for the second of twin beams
  @Environment(\.accessibilityReduceMotion) private var reduceMotion

  var body: some View {
    if !reduceMotion {
      TimelineView(.animation) { context in
        let t = CGFloat(context.date.timeIntervalSinceReferenceDate / lap)
        let head = (t + start).truncatingRemainder(dividingBy: 1)
        ZStack {
          if bloom > 0 { beam(head: head, lineWidth: width * 2).blur(radius: bloom).opacity(0.8) }
          beam(head: head, lineWidth: width)
        }
      }
      .allowsHitTesting(false)
      .accessibilityHidden(true)
    }
  }

  /// The tail as n nested strokes that all end at the head: stroke k starts k/n of the tail behind it, so
  /// opacity builds up toward the head with no seams between pieces.
  private func beam(head: CGFloat, lineWidth: CGFloat) -> some View {
    Canvas { gc, size in
      let path = shape.path(in: CGRect(origin: .zero, size: size).insetBy(dx: width / 2, dy: width / 2))
      let n = 16
      func target(_ k: Int) -> Double { k < 0 ? 0 : pow(Double(k + 1) / Double(n), 2) }   // opacity in piece k
      for k in 0..<n {
        let alpha = 1 - (1 - target(k)) / (1 - target(k - 1))
        for (from, to) in Self.wrapped(head - tail * CGFloat(n - k) / CGFloat(n), head) {
          gc.stroke(path.trimmedPath(from: from, to: to), with: .color(color.opacity(alpha)), lineWidth: lineWidth)
        }
      }
    }
  }

  /// Splits [a, b] (a may be below 0) into ranges inside 0...1.
  private static func wrapped(_ a: CGFloat, _ b: CGFloat) -> [(CGFloat, CGFloat)] {
    if b <= 0 { return [(a + 1, b + 1)] }
    if a < 0 { return [(a + 1, 1), (0, b)] }
    return [(a, b)]
  }
}

Button("Get started") { }
  .buttonStyle(.glassProminent)
  .overlay { BorderBeam(shape: Capsule()) }

CardContent()
  .glassEffect(.regular, in: .rect(cornerRadius: 28, style: .continuous))
  .overlay {
    ZStack {                                                   // twin beams
      BorderBeam(shape: RoundedRectangle(cornerRadius: 28, style: .continuous), lap: 8)
      BorderBeam(shape: RoundedRectangle(cornerRadius: 28, style: .continuous), lap: 8, start: 0.5)
    }
  }