Back to Library
Magnetic Dock

Hover to play

Magnetic Dock

by Luiz Mello

@luizmellodev
navigationinteractionmacos

Description

A macOS-style dock that magnifies app icons based on pointer proximity with smooth interaction and spring motion.

SwiftUI Code

//
// A macOS-style dock bar that magnifies icons based on finger proximity.
// Drag or tap anywhere on the dock to trigger the magnification effect.

struct MagneticDock: View {
    private let items: [(icon: String, color: Color, label: String)] = [
        ("phone.fill", .green, "Phone"),
        ("message.fill", .green, "Messages"),
        ("safari.fill", .blue, "Safari"),
        ("envelope.fill", .blue, "Mail"),
        ("camera.fill", Color(.systemGray2), "Camera"),
    ]

    @State private var touchX: CGFloat? = nil

    private let itemSize: CGFloat = 52
    private let spacing: CGFloat = 14
    private let hPadding: CGFloat = 16
    private let magnifyRadius: CGFloat = 72
    private let maxScale: CGFloat = 1.65

// ... (click "Show full code" to see more)