Spotlight / dim backdrop

<div class="stage" id="stage"><div class="board">
  <div class="panel"><b>01</b><i></i><i></i></div><div class="panel"><b>02</b><i></i><i></i></div><div class="panel"><b>03</b><i></i></div>
</div><div class="dim"></div><div class="beam" id="beam"></div><div class="label">SPOTLIGHT</div></div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
.board{position:absolute;inset:14% 8%;display:flex;gap:5%;align-items:center}
.panel{position:relative;flex:1;height:60%;border:1px solid var(--line);background:var(--surface);padding:7%;box-shadow:0 4px 16px #0001}
.panel b{font:700 clamp(18px,4vw,34px) ui-monospace,monospace;color:var(--accent)}.panel i{display:block;width:80%;height:2px;margin-top:14%;background:var(--line)}
.dim{position:absolute;inset:0;background:transparent;pointer-events:none}
.beam{position:absolute;left:20%;top:27%;width:clamp(72px,17vw,150px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 999px rgba(10,12,14,.7),inset 0 0 0 2px #fff;pointer-events:none;animation:beam 4s ease-in-out infinite alternate}
.label{position:absolute;right:12px;bottom:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:9px ui-monospace,monospace;letter-spacing:.1em}
@keyframes beam{0%{left:16%;top:28%}55%{left:46%;top:47%}100%{left:71%;top:30%}}

const stage=document.getElementById('stage'),beam=document.getElementById('beam');
let manualUntil=0;
stage.addEventListener('pointermove',e=>{const r=stage.getBoundingClientRect();manualUntil=performance.now()+2200;beam.style.animation='none';beam.style.left=(e.clientX-r.left-beam.offsetWidth/2)+'px';beam.style.top=(e.clientY-r.top-beam.offsetHeight/2)+'px'});
stage.addEventListener('pointerleave',()=>{manualUntil=performance.now()+300;setTimeout(()=>{if(performance.now()>manualUntil)beam.style.animation=''},340)});