Design Atlas
한국어
◫ Spatial UI & XR

Ornament

오너먼트

A small control panel attached to the edge (usually the bottom) of a window, floating along with it without touching the window body itself.

Also known as: visionOS OrnamentAttached toolbar
···
html
<div class="room2"><div class="stack">
  <div class="win2"><div class="l"></div><div class="l"></div></div>
  <div class="orn">
    <span class="ic"></span><span class="ic active"></span><span class="ic"></span>
  </div>
</div></div>
css
body{background:linear-gradient(180deg,#1a1c30,#0b0b14)}
.room2{position:absolute;inset:0;display:grid;place-items:center}
.stack{display:flex;flex-direction:column;align-items:center;gap:0;perspective:700px}
.win2{width:min(56%,240px);height:min(60%,140px);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  box-shadow:0 24px 40px rgba(0,0,0,.5);padding:16px;display:grid;gap:8px;align-content:start;
  animation:winf 4.6s ease-in-out infinite}
.win2 .l{height:8px;border-radius:4px;background:rgba(255,255,255,.2)}
.win2 .l:first-child{width:70%}.win2 .l:last-child{width:90%}
.orn{margin-top:-8px;display:flex;gap:10px;padding:9px 16px;border-radius:999px;
  background:rgba(20,20,32,.75);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  box-shadow:0 18px 30px rgba(0,0,0,.55);animation:ornf 4.6s ease-in-out infinite;animation-delay:-.15s}
.ic{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.3)}
.ic.active{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
@keyframes winf{0%,100%{transform:translateY(0) rotateX(2deg)}50%{transform:translateY(-10px) rotateX(-1deg)}}
@keyframes ornf{0%,100%{transform:translateY(0) translateZ(30px)}50%{transform:translateY(-7px) translateZ(30px)}}

Peripheral window controls — play/pause, tab switches — placed outside the window body but still visually bound to it, rather than embedded in the content area. Move the window and the ornament follows, keeping the same relative position.

Two reasons to use one: it keeps the window's content area untouched, and the ornament can float a bit closer to the user than the window (a larger z value), so it always sits in the layer your hand reaches first.

The demo floats a small pill-shaped toolbar just below a glass window, slightly closer to the viewer — it sways together with the window but on a subtly different phase, reading as the same group at a different depth.

When to use

Use it for global controls unrelated to the window content — close, playback controls, tabs. Keep content-specific buttons inside the window.