다이제틱 UI (세계관 내 UI)

<div class="durow">
<div class="ducol"><div class="dulabel">OVERLAY</div><div class="dustage"><div class="duworld"></div><div class="duoverlay"><div class="duobar"><div class="duofill" id="of"></div></div></div></div></div>
<div class="ducol"><div class="dulabel">DIEGETIC</div><div class="dustage"><div class="duworld"></div><div class="dupanel" id="panel"><div class="dupbar"><div class="dupfill" id="pf"></div></div></div></div></div>
</div>

.durow{display:flex;gap:clamp(8px,3.4vmin,18px);width:100%;height:100%;padding:4%}
.ducol{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.dulabel{font:700 clamp(7px,2.2vmin,9px) monospace;color:var(--muted);letter-spacing:.1em;text-align:center}
.dustage{position:relative;flex:1;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.duworld{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 70%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 55%),
  radial-gradient(circle at 75% 30%, color-mix(in srgb,var(--accent-3) 14%,transparent), transparent 50%)}
.duoverlay{position:absolute;top:8%;left:8%;right:8%}
.duobar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--fg) 15%,transparent);border:1px solid var(--line);overflow:hidden}
.duofill{height:100%;width:80%;background:var(--accent-2);transform-origin:left;transition:transform .4s}
.dupanel{position:absolute;left:20%;bottom:14%;width:56%;padding:5%;border-radius:5px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);
  transform:perspective(200px) rotateX(28deg) rotateY(-6deg);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.dupbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 15%,transparent);overflow:hidden}
.dupfill{height:100%;width:80%;background:var(--accent-3);transform-origin:left;transition:transform .4s}

const of=document.getElementById('of');
const pf=document.getElementById('pf');
const panel=document.getElementById('panel');
let hp=0.8;
function damage(){
  hp=Math.max(0.15, hp-0.28);
  of.style.transform='scaleX('+hp+')';
  pf.style.transform='scaleX('+hp+')';
  panel.style.transform='perspective(200px) rotateX(28deg) rotateY(-6deg) translateY(-3px)';
  setTimeout(function(){ panel.style.transform='perspective(200px) rotateX(28deg) rotateY(-6deg)'; }, 160);
  if(hp<=0.15){
    setTimeout(function(){
      hp=0.8;
      of.style.transform='scaleX('+hp+')';
      pf.style.transform='scaleX('+hp+')';
    }, 900);
  }
}
setInterval(damage, 1400);