스페큘러 하이라이트

<div class="card" id="c"><span>Hover me</span></div>

.card{--x:50%;--y:25%;position:relative;width:min(260px,80%);aspect-ratio:16/10;border-radius:20px;
  background:linear-gradient(135deg,#2b2b3a,#15151f);overflow:hidden;display:grid;place-items:center;
  color:#fff;font-weight:600;letter-spacing:.02em;box-shadow:0 20px 50px rgba(0,0,0,.4);cursor:pointer}
.card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--x) var(--y),rgba(255,255,255,.6),transparent 35%);mix-blend-mode:screen}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

const card = document.getElementById('c');
let auto = true, t = 0;
function setPos(x, y) { card.style.setProperty('--x', x + '%'); card.style.setProperty('--y', y + '%'); }
function loop() {
  if (auto) { t += 0.01; setPos(50 + Math.sin(t) * 38, 30 + Math.cos(t * 1.4) * 24); }
  requestAnimationFrame(loop);
}
loop();
card.addEventListener('pointermove', (e) => {
  auto = false;
  const r = card.getBoundingClientRect();
  setPos(((e.clientX - r.left) / r.width) * 100, ((e.clientY - r.top) / r.height) * 100);
});
card.addEventListener('pointerleave', () => { auto = true; });