스포트라이트 카드

<div class="spot" id="sp"><div class="grid"></div><div class="glow"></div><div class="content"><strong>Spotlight</strong><span>move your cursor</span></div></div>

.spot{--x:30%;--y:30%;position:relative;width:min(300px,85%);aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
.grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px}
.glow{position:absolute;inset:0;
  background:radial-gradient(220px circle at var(--x) var(--y),color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%)}
.content{position:relative;text-align:center;display:grid;gap:4px}
.content strong{color:var(--fg);font-size:17px}
.content span{color:var(--muted);font-size:12px}

const el = document.getElementById('sp');
let auto = true, t = 0;
function setPos(xp, yp){ el.style.setProperty('--x', xp + '%'); el.style.setProperty('--y', yp + '%'); }
function loop(){
  if (auto) { t += 0.014; setPos(50 + Math.sin(t) * 34, 45 + Math.cos(t * 1.3) * 30); }
  requestAnimationFrame(loop);
}
loop();
el.addEventListener('pointermove', (e) => {
  auto = false;
  const r = el.getBoundingClientRect();
  setPos(((e.clientX - r.left) / r.width) * 100, ((e.clientY - r.top) / r.height) * 100);
});
el.addEventListener('pointerleave', () => { auto = true; });