Design Atlas
한국어
◫ Spatial UI & XR

Immersive space

이머시브 스페이스

The transition from a small window to an environment that wraps the entire space around you — from partial to full immersion.

Also known as: Full immersionvisionOS Immersive Space
···
html
<div class="env" id="env"></div><div class="wn2" id="wn2"><span>Enter</span></div>
css
.env{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#5b3ad1,#0c0c1c 72%);opacity:0;transition:opacity 1.6s ease}
.env.on{opacity:1}
.wn2{position:absolute;width:150px;height:96px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#e8e8f4;font-weight:700;font-size:13px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);transition:width 1.6s ease,height 1.6s ease,border-radius 1.6s ease,opacity 1.6s ease}
.wn2.grow{width:100%;height:100%;border-radius:0;opacity:0}
js
const env=document.getElementById('env'), wn=document.getElementById('wn2');
function loop(){
  env.classList.remove('on'); wn.classList.remove('grow');
  setTimeout(()=>{ env.classList.add('on'); wn.classList.add('grow'); }, 1200);
  setTimeout(loop, 4200);
}
loop();

If windows and volumes are objects in a room, an immersive space changes the room itself. Tap to enter and the window grows to fill the entire field of view, replacing the background — real room or virtual — with that content. Used for game worlds, 360° photo viewing, meditation app backdrops.

Immersion is usually adjustable in degrees — from "partial", where the surroundings stay slightly visible, to "full", which wraps completely, often controllable like turning a dial. Jumping straight to 100% immersion can be disorienting, so the transition needs to be smooth and predictable.

The demo loops a small window expanding to fill the frame with an environment color — in a real app that expansion happens smoothly over a couple of seconds.

When to use

Always give a clear way in and out. During full immersion people can bump into real furniture or others, so avoid abrupt viewpoint changes.