Lab 054 – Oops all Hover Effects

Just a bit of fun with hover effect namespaces.

visionOS Simulator video showing many views reacting to a hover effect on one button

struct Lab054: View {
    @Namespace private var hoverNamespace

    var body: some View {
        ZStack {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 4), count: 12), spacing: 4) {
                ForEach(0..<96, id: \.self) { index in
                    Shrug(hoverNamespace: hoverNamespace)
                        .offset(y: index % 2 == 0 ? 24 : 0)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)

            VStack {
                Button(action: {
                    print("")
                }, label: {
                    HStack {
                        Text("Hover Me")
                    }
                })
                .glassBackgroundEffect()
                .hoverEffect(in: HoverEffectGroup(hoverNamespace)) { effect, isActive, proxy in
                    effect.animation(.easeOut) {
                        $0.rotationEffect(.degrees(isActive ? -15 : 0), anchor: .center)

                    }
                }

            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .glassBackgroundEffect()
    }
}

fileprivate struct Shrug: View {
    // There may be a better way to pass the namespace to this view, but this works
    var hoverNamespace: Namespace.ID

    var body: some View {
        Text("🤷🏻‍♂️")
            .font(.extraLargeTitle2)
            .hoverEffect(in: HoverEffectGroup(hoverNamespace)) { effect, isActive, proxy in
                effect.opacity(isActive ? 0.3 : 0)
            }
    }
}

Support our work so we can continue to bring you new examples and articles.

Questions or feedback?