Design Atlas
한국어
◫ Spatial UI & XR

Parallax depth card

패럴랙스 뎁스 카드

Slicing one image into background, middle, and foreground layers so each moves at a different speed as the viewpoint shifts — reading as if it truly has depth.

Also known as: Multi-layer parallaxDepth photo
···
html
<div class="pc" id="pc">
  <div class="ly bgl"></div>
  <div class="ly midl"><div class="mnt"></div></div>
  <div class="ly fgl"><div class="fg1"></div><div class="fg2"></div></div>
</div>
css
body{background:#0a0a12}
.pc{position:relative;width:min(90%,340px);height:min(85%,190px);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.5)}
.ly{position:absolute;inset:-10%;transition:transform .05s linear}
.bgl{background:linear-gradient(180deg,#274b8a 0%,#1a2f5c 60%,#0f1730 100%)}
.midl .mnt{position:absolute;left:-5%;right:-5%;bottom:0;height:46%;
  background:linear-gradient(160deg,#3c5fa8,#22366b);clip-path:polygon(0 100%,0 55%,20% 30%,38% 58%,55% 20%,72% 50%,100% 35%,100% 100%)}
.fgl .fg1{position:absolute;left:6%;bottom:0;width:30%;height:60%;background:#0c1226;border-radius:12px 12px 0 0}
.fgl .fg2{position:absolute;right:10%;bottom:0;width:22%;height:44%;background:#141b34;border-radius:10px 10px 0 0}
js
const bg=document.querySelector('.bgl'), mid=document.querySelector('.midl'), fg=document.querySelector('.fgl');
let t=0;
function frame(){
  t+=0.02;
  const s=Math.sin(t);
  bg.style.transform='translateX('+(s*4)+'px)';
  mid.style.transform='translateX('+(s*14)+'px)';
  fg.style.transform='translateX('+(s*30)+'px)';
  requestAnimationFrame(frame);
}
frame();

A single 2D photo has no depth information on its own. But split it into background, mid-subject, and foreground layers, and as the viewpoint (a cursor, a head movement) shifts left and right, moving the closer layer more and the farther layer less builds a sense of depth — an artificial recreation of motion parallax.

In spatial UI this technique gives ordinary photos and cards a sense of "being in space." Tilt the headset slightly and the subject in a photo shifts more than its background, creating the illusion that it's really floating there in relief.

The demo moves three layered shapes — background, middle, foreground — at different rates following a cursor (or an automatic left-right sweeping viewpoint). Watch how the foreground moves the most while the background barely shifts.

When to use

Use it to add a light sense of depth to photo or card content. Keep the movement range small — overdo it and it can cause dizziness.