Design Atlas
한국어
◫ Spatial UI & XR

Eye-comfort motion

아이 컴포트 모션

The line between motion that causes headset motion sickness — anything glued to the screen — and motion that stays comfortable because it stays fixed in the world.

Also known as: Vestibular-safe motionMotion sickness guideline
···
html
<div class="cols">
  <div class="col"><span class="lbl bad">Avoid</span><div class="chip bad" id="badc">Notice</div></div>
  <div class="col"><span class="lbl good">Prefer</span><div class="chip good" id="goodc">Notice</div></div>
</div>
css
body{background:radial-gradient(circle at 50% 30%,#191c30,#0a0a12 72%)}
.cols{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,8vmin,48px)}
.col{display:grid;justify-items:center;gap:10px}
.lbl{font-size:clamp(9px,2.6vmin,11px);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lbl.bad{color:#ff8a8a}.lbl.good{color:#7be0a8}
.chip{padding:clamp(10px,3vmin,16px) clamp(16px,4vmin,24px);border-radius:12px;font-weight:700;color:#fff;
  font-size:clamp(11px,3vmin,14px)}
.chip.bad{background:linear-gradient(135deg,#c23a3a,#7a1f1f);animation:jitter .12s infinite}
.chip.good{background:linear-gradient(135deg,#1e9e64,#136b46);animation:drift 4.5s ease-in-out infinite}
@keyframes jitter{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3px,-2px) rotate(-2deg)}
  50%{transform:translate(-3px,2px) rotate(2deg)}75%{transform:translate(2px,2px) rotate(-1deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

The inner ear's balance sense (the vestibular system) sends its own signal for "am I moving." When what the eyes see disagrees with that signal, motion sickness follows. The trouble comes from UI glued to the screen (head-locked) that suddenly moves fast, or a whole-viewport shake the user didn't initiate — the body stays still while only the eyes register motion.

The safer path is world-locked motion: content that moves only at a natural pace relative to one point in real space, so what the eyes see matches the user's actual head movement, and it stays comfortable. Avoid sudden acceleration, sharp rotation, and whole-screen shake; if the camera really has to move, a cut or fade is the standard substitute for a fast pan.

The demo compares the same phrase two ways — the left side is the bad example, jittering fast while glued to the screen; the right side is the good example, staying fixed in space and moving only slowly.

When to use

Apply this standard to any camera or viewpoint motion. Be especially careful with loading screens and transitions — do not shake or spin the whole view quickly.