balochcodes/liquidglassdock

An interactive, floating glassmorphic macOS & iPadOS style dock for SwiftUI featuring smooth magnetic proximity magnification, playful tap bounce physics, and notification badge counters.

✨ Features

🧲 Magnetic Proximity Magnification: Smooth Gaussian/cosine proximity curve dynamically magnifies icons as the user's finger or cursor drags across the dock.
🪟 Frosted Glassmorphism: Dual-layer translucent frosted glass container with specular edge shine and soft drop shadow.
🦘 Playful Spring Tap Bounce: Tapping any dock icon triggers an authentic macOS-style vertical spring bounce.
🔴 Notification Badges & Active Dots: Native numeric counter badges (e.g. unread count) and subtle running app indicator dots.
📳 Tactile Haptic Feedback: Subtle selection clicks while hovering across items (iOS).
🎨 Deep Theming: Configure icon sizes, magnification scale, proximity range, and glass blur via DockTheme.
⚡ Zero External Dependencies: Built 100% on native SwiftUI primitives.

📦 Installation

In Xcode (Recommended)

Open your project in Xcode and go to File ➔ Add Package Dependencies...
In the search box, paste:

``text https://github.com/BalochCodes/LiquidGlassDock.git ``

Select Up to Next Major Version (1.0.0) and click Add Package.

In `Package.swift`

Add LiquidGlassDock to your dependencies:

dependencies: [
    .package(url: "https://github.com/BalochCodes/LiquidGlassDock.git", from: "1.0.0")
]

Import the framework:

import SwiftUI
import LiquidGlassDock

🚀 Usage Examples

1. macOS Style Floating Navigation Dock

import SwiftUI
import LiquidGlassDock

struct MainWorkspaceView: View {
    @State private var selectedTab = "Finder"

    var body: some View {
        ZStack(alignment: .bottom) {
            Color(red: 0.1, green: 0.12, blue: 0.18).ignoresSafeArea()

            Text("Current View: \(selectedTab)")
                .font(.title2.bold())
                .foregroundColor(.white)
                .frame(maxHeight: .infinity)

            LiquidGlassDockView(
                items: [
                    DockItem(title: "Finder", systemImage: "macwindow", iconTint: .cyan, showActiveDot: true) {
                        selectedTab = "Finder"
                    },
                    DockItem(title: "Messages", systemImage: "message.fill", iconTint: .green, badgeCount: 3) {
                        selectedTab = "Messages"
                    },
                    DockItem(title: "Mail", systemImage: "envelope.fill", iconTint: .blue, badgeCount: 9) {
                        selectedTab = "Mail"
                    },
                    DockItem(title: "Music", systemImage: "music.note", iconTint: .red, showActiveDot: true) {
                        selectedTab = "Music"
                    },
                    DockItem(title: "Settings", systemImage: "gearshape.fill", iconTint: .white) {
                        selectedTab = "Settings"
                    }
                ]
            )
            .padding(.bottom, 24)
        }
    }
}

2. iPadOS Floating Media Control Dock

LiquidGlassDockView(
    items: [
        DockItem(title: "Previous", systemImage: "backward.fill", iconTint: .white),
        DockItem(title: "Play", systemImage: "play.fill", iconTint: .green),
        DockItem(title: "Next", systemImage: "forward.fill", iconTint: .white),
        DockItem(title: "Shuffle", systemImage: "shuffle", iconTint: .purple),
        DockItem(title: "AirPlay", systemImage: "airplayaudio", iconTint: .blue)
    ],
    theme: DockTheme(
        baseItemSize: 44,
        maxMagnification: 1.45,
        dockCornerRadius: 24
    )
)

3. Custom Glass Theming

let customTheme = DockTheme(
    baseItemSize: 52.0,
    maxMagnification: 1.65,
    magnificationRange: 140.0,
    itemSpacing: 14.0,
    glassColor: Color(red: 0.14, green: 0.18, blue: 0.28).opacity(0.65),
    borderColor: Color.blue.opacity(0.35),
    dockCornerRadius: 28.0,
    activeDotColor: Color.cyan,
    badgeColor: Color.orange
)

LiquidGlassDockView(items: dockItems, theme: customTheme)

🛠️ API Reference

`LiquidGlassDockView`

`DockItem`

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | String | Required | Accessible label/title of the dock icon. | | systemImage | String | Required | SF Symbol icon name displayed inside the tile. | | iconTint | Color | .white | Color tint for the SF Symbol icon. | | badgeCount | Int? | nil | Optional numeric notification counter. | | showActiveDot | Bool | false | Displays a running dot indicator beneath the item. | | action | () -> Void | {} | Callback fired when the item is tapped. |

`DockTheme`

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Created by Shahzain Baloch.

Package Metadata

Repository: balochcodes/liquidglassdock

Default branch: main

README: README.md