Zoom (lens)

<div class="stage" id="stage">
  <div class="art" id="art">
    <div class="horizon"></div><div class="sun"></div><div class="peak p1"></div><div class="peak p2"></div>
    <i class="dot d1"></i><i class="dot d2"></i><i class="dot d3"></i><i class="dot d4"></i>
    <div class="route"></div><span class="pin">A</span>
  </div>
  <div class="frame-guide" id="frameGuide"><i></i></div>
  <div class="readout">CAMERA POSITION FIXED <b id="readout">70 mm</b></div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
.art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#9bc8d2 0 52%,#d8c8a4 52% 100%);transform-origin:50% 50%;animation:opticalZoom 3.6s ease-in-out infinite alternate}
.horizon{position:absolute;inset:50% 0 0;background:linear-gradient(160deg,#647d73,#334b46)}
.sun{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;left:70%;top:16%;background:#fff0c8}
.peak{position:absolute;bottom:23%;width:48%;height:44%;clip-path:polygon(0 100%,45% 0,100% 100%);background:#819286}
.p1{left:3%}.p2{left:48%;height:52%;background:#566e66}
.dot{position:absolute;width:4%;aspect-ratio:1;border-radius:50%;background:#f8f4e8;box-shadow:0 0 0 5px rgba(255,255,255,.22)}
.d1{left:22%;top:65%}.d2{left:39%;top:74%}.d3{left:63%;top:61%}.d4{left:83%;top:78%}
.route{position:absolute;left:8%;top:74%;width:84%;height:16%;border-top:2px dashed rgba(255,255,255,.7);transform:rotate(-8deg)}
.pin{position:absolute;left:61%;top:53%;display:grid;place-items:center;width:24px;aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;font:700 12px ui-monospace,monospace}
.frame-guide{position:absolute;left:61%;top:56%;width:24px;aspect-ratio:1;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #0002;pointer-events:none}
.frame-guide i{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.readout{position:absolute;left:12px;top:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:10px ui-monospace,monospace;color:var(--muted)}
.readout b{color:var(--fg);margin-left:5px}
@keyframes opticalZoom{from{transform:scale(1)}to{transform:scale(1.45)}}

const stage=document.getElementById('stage'),art=document.getElementById('art');
const guide=document.getElementById('frameGuide'),label=document.getElementById('readout');
let x=.61,y=.56,t=0,manualUntil=0;
function place(nx,ny){
  x=Math.max(.08,Math.min(.92,nx));y=Math.max(.1,Math.min(.9,ny));
  const box=stage.getBoundingClientRect();
  guide.style.left=(x*box.width)+'px';guide.style.top=(y*box.height)+'px';
  art.style.transformOrigin=(x*100)+'% '+(y*100)+'%';
}
stage.addEventListener('pointermove',e=>{const r=stage.getBoundingClientRect();manualUntil=performance.now()+2400;place((e.clientX-r.left)/r.width,(e.clientY-r.top)/r.height)});
function loop(){if(performance.now()>manualUntil){t+=.008;place(.5+.2*Math.cos(t),.55+.16*Math.sin(t*1.3))}requestAnimationFrame(loop)}
place(x,y);requestAnimationFrame(loop);
setInterval(()=>{label.textContent=label.textContent==='70 mm'?'135 mm':'70 mm'},1700);