Spatial audio cue

const wrap=document.createElement('div');
wrap.style.cssText='position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#171a2c,#0a0a12 75%)';
document.body.appendChild(wrap);
const src={x:0.86,y:0.32};
const listener={x:0.42,y:0.62};
function pct(v){ return (v*100)+'%'; }
const srcDot=document.createElement('div');
srcDot.style.cssText='position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd76a;box-shadow:0 0 14px #ffd76a;'
 +'left:'+pct(src.x)+';top:'+pct(src.y)+';transform:translate(-50%,-50%)';
wrap.appendChild(srcDot);
const head=document.createElement('div');
// 오른쪽 귀를 늘 약하게 밝혀 "소스가 오른쪽에 있다"는 방향성을 정적으로도 보이게 한다 —
// 캡처 시점이 애니메이션 어느 프레임이든 방향 힌트 자체는 항상 보여야 하기 때문.
head.innerHTML='<div class="ear l"></div><div class="ear r hot"></div>';
head.style.cssText='position:absolute;left:'+pct(listener.x)+';top:'+pct(listener.y)+';transform:translate(-50%,-50%);'
 +'width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);z-index:1';
wrap.appendChild(head);
const style=document.createElement('style');
style.textContent='.ear{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);transform:translateY(-50%)}'
 +'.ear.l{left:-5px}.ear.r{right:-5px}.ear.hot{background:var(--accent);box-shadow:0 0 8px var(--accent)}';
document.head.appendChild(style);
// 링 3개를 서로 다른 위상으로 계속 확장시켜, 캡처 시점이 언제든 최소 하나는 중간 단계(선명)로 보이게 한다.
const RINGS = 3, PERIOD = 2200, MAXR = 150;
const els = Array.from({ length: RINGS }, () => {
  const r = document.createElement('div');
  r.style.cssText = 'position:absolute;left:' + pct(src.x) + ';top:' + pct(src.y) + ';border-radius:50%;'
    + 'border:1.5px solid rgba(255,215,106,.7);transform:translate(-50%,-50%)';
  wrap.appendChild(r);
  return r;
});
function frame(t) {
  els.forEach((el, i) => {
    const phase = ((t + (i * PERIOD) / RINGS) % PERIOD) / PERIOD;
    const d = phase * MAXR;
    el.style.width = d + 'px'; el.style.height = d + 'px';
    el.style.opacity = String(0.75 * (1 - phase));
  });
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);