Design Atlas
한국어
◫ Spatial UI & XR

Spatial window

스페이셜 윈도우

The default unit for showing a regular 2D app as a rectangular glass panel floating in space — the user can freely move and resize it.

Also known as: visionOS WindowFloating panel
···
html
<div class="room"><div class="win" id="win">
  <div class="bar"><span></span><span></span><span></span></div>
  <div class="body"><div class="ln l1"></div><div class="ln l2"></div><div class="ln l3"></div></div>
</div></div>
css
body{background:linear-gradient(180deg,#191a2e,#0c0c16)}
.room{position:absolute;inset:0;display:grid;place-items:center}
.win{width:min(60%,280px);height:min(70%,190px);border-radius:18px;padding:14px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  box-shadow:0 30px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25);
  animation:float 5s ease-in-out infinite}
.bar{display:flex;gap:6px;margin-bottom:12px}
.bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.body{display:grid;gap:9px}
.ln{height:9px;border-radius:5px;background:rgba(255,255,255,.22)}
.l1{width:80%}.l2{width:95%}.l3{width:60%}
@keyframes float{0%,100%{transform:translateY(0) rotateX(2deg)}50%{transform:translateY(-14px) rotateX(-1deg)}}

The most basic content unit in spatial computing. It holds an ordinary flat 2D interface — buttons, lists, text — but renders it as a glass panel floating somewhere in the room. Users can grab a handle to move or resize it, and once placed it stays there (or follows the user, depending on the app).

A window is "shallow" spatial content, in contrast with full immersion — the rest of the room, and other windows, stay visible. That makes running several windows side by side for multitasking feel natural.

The demo shows a glass panel drifting gently up and down, with a soft shadow suggesting its distance from the room. Perfectly still panels can start to look glued to the background, so a small idle motion is common.

When to use

A good first step for porting an existing 2D app into spatial UI. If the content only makes sense in 3D — like inspecting a model — reach for a volume instead.