SwiftUI Microinteractions Pro

I have generated the morphing player FAB using the Liquid Glass archetype. The component uses a single view tree to ensure a fluid morph between the pill and circle states without cross-fading.

SwiftUI Morphing Player

import SwiftUI

// MARK: - Main View
struct MorphingPlayerFAB: View {
    @State private var isExpanded = true
    @State private var appeared = false
    
    // Snappy physics: response 0.35, damping 0.6
    private let spring = Animation.spring(response: 0.35, dampingFraction: 0.6)
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // Background grid to show off glass refraction
            ImageTileGrid()
                .opacity(0.4)
            
            HStack(spacing: isExpanded ? 12 : 0) {
                // Shared element: Album Art
                RoundedRectangle(cornerRadius: 12)
                    .fill(Color.gray.opacity(0.3))
                    .frame(width: 48, height: 48)
                    .overlay(Image(systemName: "music.note").foregroundStyle(.white.opacity(0.8)))
                    .padding(.leading, 8)
                
                if isExpanded {
                    VStack(alignment: .leading, spacing: 2) {
                        Text("Starlight Drift")
                            .font(.system(size: 15, weight: .semibold))
                            .foregroundStyle(.white)
                        Text("Lunar Collective")
                            .font(.system(size: 13))
                            .foregroundStyle(.white.opacity(0.6))
                    }
                    .transition(.opacity.combined(with: .move(edge: .trailing)))
                    
                    Spacer()
                    
                    Image(systemName: "pause.fill")
                        .font(.system(size: 20))
                        .foregroundStyle(.white)
                        .padding(.trailing, 16)
                }
            }
            .frame(width: isExpanded ? 320 : 64, height: 64)
            .background {
                if #available(iOS 26.0, *) {
                    Capsule()
                        .fill(.clear)
                        .glassEffect(.regular.interactive(), in: Capsule())
                } else {
                    Capsule()
                        .fill(.ultraThinMaterial)
                        .overlay(Capsule().stroke(.white.opacity(0.1), lineWidth: 0.5))
                }
            }
            .clipShape(Capsule())
            .shadow(color: .black.opacity(0.2), radius: 20, y: 10)
            .padding(.bottom, 40)
            .onTapGesture {
                UIImpactFeedbackGenerator(style: .medium).impactOccurred()
                withAnimation(spring) {
                    isExpanded.toggle()
                }
            }
        }
        .ignoresSafeArea()
    }
}

private struct ImageTileGrid: View {
    var body: some View {
        let columns = [GridItem(.flexible()), GridItem(.flexible())]
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(0..<20) { i in
                    RoundedRectangle(cornerRadius: 20)
                        .fill(LinearGradient(colors: [.blue, .purple], startPoint: .topLeading, endPoint: .bottomTrailing))
                        .frame(height: 200)
                }
            }
            .padding()
        }
    }
}

Next steps

1. Integrate the isExpanded state with your ScrollView offset to auto-collapse the player on scroll.
2. Replace the RoundedRectangle placeholder with AsyncImage to fetch real album artwork.
3. Add HapticFeedback.selectionChanged() to the playback toggle for tactile confirmation.