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.

Follow Step Into Vision