Zoom to element

<div class="stage" id="stage"><div class="interface" id="interface">
  <div class="top"><i></i><i></i><i></i><span>CONTROL PANEL</span></div>
  <div class="row target" data-name="Profile"><b>Profile</b><em>›</em></div>
  <div class="row target" data-name="Search"><b>Search field</b><em>⌕</em></div>
  <div class="row target" data-name="Save"><b>Save changes</b><em>↗</em></div>
</div><div class="pointer" id="pointer"></div><div class="tag" id="tag">SELECT A CONTROL</div></div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
.interface{position:absolute;left:23%;top:13%;width:54%;padding:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 26px #0002;transform:scale(1);transform-origin:50% 50%;transition:transform .65s cubic-bezier(.2,.75,.25,1),transform-origin .2s}
.top{height:26px;border-bottom:1px solid var(--line);font:8px ui-monospace,monospace;color:var(--muted);display:flex;align-items:center;gap:5px;padding-bottom:5px}
.top i{width:5px;height:5px;border-radius:50%;background:var(--line)}.top span{margin-left:auto}
.row{height:clamp(34px,8vh,56px);margin-top:8px;padding:0 10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--bg);font:clamp(10px,2vw,14px) system-ui;cursor:pointer}
.row em{font-style:normal;font-size:18px;color:var(--accent)}
.row.active{outline:2px solid var(--accent);outline-offset:2px}
.pointer{position:absolute;width:12px;height:16px;background:var(--fg);clip-path:polygon(0 0,100% 70%,57% 76%,73% 100%,58% 100%,43% 78%,20% 94%);filter:drop-shadow(0 1px 1px #fff);transition:left .65s,top .65s;pointer-events:none}
.tag{position:absolute;left:12px;bottom:12px;padding:5px 8px;border:1px solid var(--line);background:var(--surface);font:9px ui-monospace,monospace;color:var(--muted)}

const stage=document.getElementById('stage'),panel=document.getElementById('interface');
const targets=[...document.querySelectorAll('.target')],pointer=document.getElementById('pointer'),tag=document.getElementById('tag');
let index=0,manualUntil=0;
function focus(el){
  targets.forEach(t=>t.classList.toggle('active',t===el));
  const r=stage.getBoundingClientRect(),b=el.getBoundingClientRect();
  const x=(el.offsetLeft+el.offsetWidth/2)/panel.clientWidth;
  const y=(el.offsetTop+el.offsetHeight/2)/panel.clientHeight;
  panel.style.transformOrigin=(x*100)+'% '+(y*100)+'%';panel.style.transform='scale(1.58)';
  pointer.style.left=(b.left-r.left+b.width*.78)+'px';pointer.style.top=(b.top-r.top+b.height*.34)+'px';
  tag.textContent='ZOOM TO '+el.dataset.name.toUpperCase();
}
function cycle(){if(performance.now()<manualUntil)return;index=(index+1)%targets.length;panel.style.transform='scale(1)';setTimeout(()=>focus(targets[index]),520)}
targets.forEach(el=>el.addEventListener('click',()=>{manualUntil=performance.now()+2300;focus(el)}));
setInterval(cycle,1650);setTimeout(()=>focus(targets[0]),250);