Generate Spatial Computing UI with 3D Glass Effects

Spatial Computing UI is a design-style child skill ('a step beyond Spatial Design - fully 3D windows floating in augmented reality'), part of the design-it family and not meant to be triggered directly. Three core principles: Z-Space Hierarchy (not just drop shadows but actual 3D distance - modals float genuinely in front of the main window, not just visually layered), Gaze-Based Interaction Cues (elements highlight vividly on hover, anticipating eye-tracking or precise pointer control rather than a mouse-only interaction model), and Glass and Light (windows are thick sheets of frosted glass that bend light and cast soft shadows onto the physical environment behind them).

Use it when the user's request matches this AR/mixed-reality windowing aesthetic - visionOS-style apps, AR concept interfaces, or any UI meant to feel like it's physically floating in a real room rather than flat on a screen. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA relies entirely on the background environment showing through - purely translucent whites and blacks (rgba(255,255,255,0.x)), never opaque solid colors - SF Pro with heavy use of varied weights for hierarchy, and very high border radii (24-32px) so everything reads as a rounded rectangle or perfect circle rather than a sharp screen-native window. The web implementation is best emulated with CSS 3D transforms: a room-photo background with perspective: 1200px, a main "spatial window" using heavy backdrop-filter: blur(50px) saturate(200%) glass plus an inset highlight and large soft outer shadow, positioned with translateZ(-100px) to sit slightly back in depth, while a modal genuinely floats in front via translateZ(50px) with a more opaque glass fill. Buttons get gaze/hover feedback that both brightens the fill and lifts the element forward in Z-space (transform: translateZ(10px) scale(1.05)) using a smooth spatial-feeling cubic-bezier easing.

.spatial-window {
  backdrop-filter: blur(50px) saturate(200%);
  transform: translateZ(-100px);
}
.spatial-modal { transform: translate(-50%, -50%) translateZ(50px); }
.spatial-btn:hover { transform: translateZ(10px) scale(1.05); }

The SwiftUI/visionOS implementation composes a simulated room-environment background image behind the glass windows, matching the web's photo-backdrop approach for a native AR-adjacent context - the same glass-and-depth vocabulary applies whether targeting real visionOS or emulating the look on iOS.

Designers and developers building visionOS-style apps, AR concept interfaces, or spatial-computing product demos that need windows to feel like they're physically floating and layered in a real room, with genuine depth and gaze-anticipating interaction rather than a flat screen metaphor.