Week 40 · Future Architectures

Pane A

Pane B

The Room Behind the Glass

Two panes, identical shape. One of them agrees there is a lamp somewhere in the room. You can feel which before you can explain why.

Predict

Pane A has no shadow. Pane B has a soft one, cast from a single source. Which pane feels closer to you — the person looking at the screen?

Experience

The Depth Stage

Three panes, one lamp. Drag the lamp anywhere in the room and watch three things move at once: the shadow each pane throws, the glint of light across its surface, and how far it slides sideways against the back wall.

Depth separation is how far apart the three panes actually sit — turn it down and they collapse onto the same plane, a stack of stickers with nothing behind them. Translucency is the material itself: push it up and the glass lets more of the room's own light through, the way visionOS's glass narrows what it lets through only enough to keep text legible. Push it too far and legibility is the thing that pays for it — watch the readout.

The Depth Stage

Drag the lamp, or select it and use the arrows

Pane A · near

Pane B · mid

Pane C · far

Grounded-ness: 77%; modelled
Legibility: 78%; modelled
Parallax, Pane A: 0px; shift vs. the back wall
Shadow throw, Pane A: 22px

Depth separation65%

FlatDeep

Pane translucency35%

OpaqueGlass

Grounded-ness and Legibility are modelled, not measured: Grounded-ness = 38 + Depth separation × 0.6; Legibility = 100 − Translucency × 0.62 (floored at 22). Shadow offset and blur scale with each pane's simulated elevation and its distance from the lamp; parallax reuses the lamp's horizontal position as a stand-in for the viewer's own — a simplification made so one control could demonstrate two cues at once, disclosed here rather than left implicit.

Concept

Diegesis, Not Décor

“Diegetic” is borrowed from film theory, where it separates what a character can perceive from what only the audience can. Most film-score music is non-diegetic — the audience hears it, no one in the scene does.

Interface design split the same way. A non-diegetic interface is a transparent overlay, acknowledged by nothing in the scene it sits over — a corner health bar, a settings sheet, a toast notification. A diegetic interface is built as an object that belongs to the world it is shown in. The most cited example is the Dead Space series (Visceral Games / EA, 2008), where the player character's health readout is not a floating bar but a glowing display built into the back of the character's suit — an object other characters in that fiction could, in principle, also see.

Drag the divider below. Same information, same value, staged two ways — one bolted to the corner of the screen, one built into the figure standing in the room.

HP 62%

Overlay · non-diegetic

Embedded · diegetic

Committing to a diegetic pattern is structural, not a skin: it changes what your layout can accommodate. Not everything should make the trip — a settings menu does not need to pretend to be furniture, and Apple's own guidance reserves the overlay treatment on purpose for anything safety-critical, where you want the interruption to read as the system talking to you, not as another citizen of the room.

A chair displayed in such a room would be good enough to sit in.

Ivan Sutherland, “The Ultimate Display,” 1965

Sutherland wrote that sentence about a computer-generated room in general, fifty-eight years before any headset could attempt it — not about Dead Space or visionOS specifically. The straight line some design writing draws from 1960s sci-fi production design to Apple's own team is flagged in the research for this piece as contested and unconfirmed; it is not repeated here as fact.

Deconstruction

Five Cues, One at a Time

A grounded pane is not one effect. It is five, stacked: a shadow, an occlusion order, a parallax shift, a size cue, and a touch of atmospheric blur.

Walk the pane down the hall below, then start switching cues off one at a time. Nothing about the slider changes — only which of the five effects the pane is allowed to show. Watch the read drop from “fully grounded” to “flat sticker” well before the last cue goes dark.

The Cue Isolator

Walk it down the hall, then start switching cues off

Pane

Grounded-ness: 100%; modelled
Reads as: Fully grounded
Cues active: 5 of 5

Walk past it20%

NearFar

Grounded-ness (modelled) is a weighted count of active cues — shadow 30, occlusion 25, parallax 20, scale 15, blur 10 — chosen in that order because a design review checklist built from the dossier treats a mismatched light source as the fastest way an eye detects a fake object, ahead of the other four.

Real World

The Same Panel, Four Eras of Light

Scrub across four decades and the panel never changes its content — only what it believes about light.

Aqua's gloss and Flat Design's bare colour are two ends of the same argument, thirteen years apart: one over-claims depth with a shine no light source produced, the other refuses depth entirely. Material Design (2014) answers with a token — a named, numbered elevation, not a texture. Microsoft's Fluent Design System, unveiled in 2017, built “depth” and “material” as two of its five formal pillars, developed partly alongside Microsoft's own HoloLens headset — a documented bridge from mixed-reality research straight into ordinary Windows desktop chrome. visionOS's glass, shipped in 2024, is the most complete version yet: the shadow, the blur and the tint all read the actual room behind them, not a preset.

Reminders

Era

AquavisionOS

Aqua — 2000 — gloss, pinstripe, a shadow big enough to read as a real window

Fluent Design (2017) and HoloLens's dates are drawn from the research dossier for this piece and graded verified in Sources below. Aqua, Flat Design and Material Design's launch years are common design-history knowledge not re-checked against a primary source this session, and are graded accordingly.

Experiment

Crouch, Then Stand Tall

Parallax has a vertical partner, and it is the one your own eye height controls.

The lamp is fixed this time. Move only your eye height, and watch the near pane drift against the back wall while the far one barely shifts — the same reason a nearby fence post races past a car window while a distant hill seems to hold still. visionOS spends real engineering effort keeping a person's primary reading content at one comfortable depth for exactly this reason: sustained, uncontrolled depth movement is not free, on a headset or on a laptop screen.

Eye Height

Crouch, or stand tall

Pane A · near

Pane C · far

Vertical shift, Pane A: 0px; near pane, vs. the far one
Viewpoint: Level

Eye heightLevel

CrouchStand tall

Challenge

Make It One Room

Three panes, one lamp, two rules stated as facts you can check rather than a feeling you chase: nothing may cover Primary, and nothing may sit outside the lamp's reach.

Challenge · One room, three panes

Open

Spread Secondary and Tertiary so neither one crosses Primary's frame, and keep every pane inside the lamp's reach — outside it, a pane goes flat and unlit.

Primary

Secondary

Tertiary — unlit

Primary occluded: Yes
Panes lit: 2 of 3

Watch the readout: it tells you which rule is still failing, not just that one is.

Insight

Occlusion tells you the order. Light tells you the truth.

Stacking order is cheap to fake — anything can sit “in front” with a higher z-index. What is hard to fake, and what the eye actually checks, is whether everything in the frame agrees about where the light is coming from. The moment a panel's shadow disagrees with its neighbour's highlight, the whole scene stops reading as one room and starts reading as several images glued together — which, underneath the glass and the gradients, is exactly what a website always was. The trick was never the render. It was getting every layer to agree on one lamp.

Mental model

Whenever a panel is meant to feel present rather than pasted on,

look for whether its shadow, its highlight, and its parallax all point back to one light,

because the eye decides “is this really here” from lighting consistency, faster than it reads anything printed on the panel.

TomorrowOpen three apps you use daily and find one card whose shadow falls the wrong way relative to its own icon's highlight. That mismatch is the tell this whole page was built to teach you to see.

End of experience

← Back to the constellation

The Room Behind the Glass

The Depth Stage

Diegesis, Not Décor

Five Cues, One at a Time

The Same Panel, Four Eras of Light

Crouch, Then Stand Tall

Make It One Room

Where this idea goes next

The Room Behind the Glass

The Depth Stage

Diegesis, Not Décor

Five Cues, One at a Time

The Same Panel, Four Eras of Light

Crouch, Then Stand Tall

Make It One Room