Spatial Computing

Foundations for visionOS and spatial interfaces. Depth, volumetric materials, and ornaments.

Depth & Z-Axis

In spatial environments, depth communicates hierarchy. Surfaces don't just overlap; they occupy physical space. Use Z-axis transforms to create clear separation between layers.

Perspective: 1000px

Level 1: Backgroundz: 0px

The furthest layer. Solid or deep blur.

Level 2: Main Windowz: 20px

Primary content area. Standard glass material.

Level 3: Ornamentsz: 40px

Floating toolbars and controls. High saturation glass.

Level 4: Overlaysz: 80px

Modals, alerts, and tooltips. Maximum depth contrast.

Spatial Materials

Spatial glass (Liquid Glass v2) uses higher blur radius and dynamic saturation to ensure legibility against complex, unpredictable backgrounds (the user's physical environment).

visionOS Blur

blur: 64px

Standard Glass

blur: 24px

Thin Glass

blur: 12px

Ornaments

Ornaments are specialized toolbars that float outside the main window bounds, usually anchored to the bottom. They provide quick access to persistent actions without cluttering the canvas.

Main Window

Ornament (Floating bottom)

Window Chrome

Spatial windows have rounded corners (xl or 2xl) and a subtle 1px internal border. The grab handle at the bottom allows for repositioning in 3D space.

Spatial Window

Viewport Content