Spatial UI

The screen stops being a rectangle you look at and becomes a room you are standing in. Everything that follows is a consequence of adding one axis.

Definition

Interfaces with a Z axis

Spatial UI is the design language of headsets — visionOS, Quest's Horizon OS, Android XR — where windows are objects placed in your actual room rather than layers on a display. It brings back everything flat design threw away, but for a hard reason rather than a decorative one: depth is now real. A shadow is not a metaphor for elevation, it is a shadow. Parallax is not an effect, it is what happens when you move your head.

The interaction model is the other half. Input is gaze plus pinch: you look at a thing, it lights up, you tap two fingers together. There is no cursor, no hover in the mouse sense, and no way to know exactly where someone is looking except by lighting up whatever they are looking at.

The rules

How it is actually built

1
Glass, because the room shows through.

Panels are translucent and adapt to the light in the physical space. An opaque window in a real room reads as a hole cut in reality, and it is genuinely unpleasant.

2
Depth is for grouping, not decoration.

Elements that belong together share a Z plane. A menu is not "above" its parent in the stacking-context sense — it is measurably in front of it, and it casts onto it.

3
Targets get much bigger.

Eye tracking has a genuine error radius, roughly a degree. Sixty points minimum, generous spacing, and nothing important within a thumb's width of anything else.

4
Highlight the rim, never fill the shape.

Gaze feedback fires constantly as the eye moves. A colour fill on every glance is exhausting; a soft rim glow reads as acknowledgement rather than selection.

5
Keep it in the comfortable cone.

Content sits within about a sixty degree field, slightly below eye level, at arm's length or beyond. Anything that requires turning your head is a design failure someone will feel in their neck.

6
Never move the world.

The scene stays anchored to the room, not to the user. Motion that is not caused by the person wearing the device is the fastest known route to nausea.

Specimen

Three panels, three depths

Move your pointer — the scene parallaxes as a head would
Z −180
Background
Furthest back. Smallest parallax, softest shadow.
Z −60
Middle
Shades the panel behind it.
Z +90
Foreground
Nearest the viewer, moves the most, throws the longest shadow onto everything behind.

What it changes for the web

Safari on visionOS renders ordinary pages as floating panels, so most sites already "work". What breaks is anything that assumed a mouse: hover menus that need a cursor path, tiny hit targets, and fixed overlays that collide with system chrome. The cheapest real win is bigger targets.

The honest caveat

This page fakes it with CSS perspective and pointer parallax, which is a flat-screen impression of the language rather than the language itself. Depth you can walk around, occlusion by your own hand, and shadows cast onto a real sofa are not things a browser on a monitor can give you.

The other eight