Apple Music Profile Effect

Scratchpad.swift

import SwiftUI

struct AppleMusicProfile: View {
  let profileImage: Image
  let name: String
  let username: String

  var body: some View {
    ZStack {
      // (1) Blurred profile image for background
      profileImage
        .resizable()
        .aspectRatio(contentMode: .fill)
        .blur(radius: 32)

      // (2) Overlayed content
      VStack {
        // (2a) clipped profile image for display
        profileImage
          .resizable()
          .aspectRatio(contentMode: .fill)
          .frame(width: 150, height: 150)
          .clipShape(Circle())
          .shadow(radius: 3)

        // (2b) Text content
        Text(name)
          .font(.title.bold())
          .blendMode(.destinationOut)
          // (2c) Blend mode .destinationOut allows us to cut out the text from the background instead of overlaying it

        Text("@\(username)")
          .font(.callout)
          .foregroundStyle(.fill)
          // (2d) Another approach is to simply use foregroundStyle vibrancy
          // This has the advantage of providing better contrast if a profile
          // image is all white for example
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
      .background(.regularMaterial) // (3) Material background will go between blurred image and content layers
      .compositingGroup()
      // (4) Compositing group + the blend mode on the text allows
      // to cut the text out of the material
      // This is only necessary if you use the approach from (2c) and not (2d)
      // for your text
    }
  }
}

#Preview {
  AppleMusicProfile(
    profileImage: Image("profile"),
    name: "John Appleseed",
    username: "johnappl3s33d"
  )
}