TechnologiesSwiftUIOrnaments and Glass Effects

OrnamentHoverContentEffect struct

iOSmacOStvOSwatchOSvisionOS✓ renders

Presents an ornament on hover using a custom effect.

How it works

OrnamentHoverContentEffect describes the hover effect that SwiftUI applies to the content of an ornament — the auxiliary controls that float alongside a window in visionOS. When a person looks at or points toward an ornament, the system needs a consistent, platform-blessed way to make its content respond, and this type names that behavior so you don't have to hand-build highlight or focus visuals. Reach for it through the hover-effect modifiers when you want an ornament's buttons, labels, or media controls to react to attention with the same feel as the rest of the system.

  1. Build the ornament content as an ordinary view

    The effect attaches to whatever content you place in the ornament, so you compose that content with the normal view vocabulary first. Here the content is a VStack holding a Text("Now Playing") label and an Image(systemName: "play.fill") — the views that will visibly respond to hover.

  2. Give the content a glass-like surface to react on

    A hover effect reads best against a defined shape, so shape and material the content before applying the effect. The example uses .background(.regularMaterial, in: .capsule) to seat the controls on a capsule of system material, the kind of surface an ornament's content typically rides on.

  3. Apply the hover behavior with hoverEffect(_:)

    hoverEffect(.highlight) is where OrnamentHoverContentEffect enters: the modifier selects a hover effect for the content, and .highlight requests the system's standard highlight treatment as the person directs attention at the ornament's content. SwiftUI drives the transition in and out for you; you only declare the intent.

  4. Let the system own the timing and appearance

    Because OrnamentHoverContentEffect is a system-defined effect rather than a set of animation values, you don't specify durations, colors, or curves. Applying it through .hoverEffect(.highlight) opts the content into the platform's tuned response, keeping it consistent with other hover-aware controls.

Try it — Change .hoverEffect(.highlight) to .hoverEffect(.lift) (or remove the modifier entirely) and compare how the "Now Playing" content reacts to attention.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

OrnamentHoverContentEffect.swift
struct OrnamentHoverContentEffectDemo: View {
    var body: some View {
        VStack {
            Text("Now Playing")
                .font(.headline)
            Image(systemName: "play.fill")
                .imageScale(.large)
        }
        .padding()
        .background(.regularMaterial, in: .capsule)
        .hoverEffect(.highlight)
        .padding()
    }
}
Live preview
Now Playing
Now Playing
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →