Cursor Spotlight Reveal — Free CSS Mask Follow-the-Cursor Snippet

<div class="csr-panel" id="csrPanel">
  <div class="csr-dim">
    <h2>The full story is here</h2>
    <p>Move your cursor across this panel — everything beneath the spotlight becomes clear while the rest stays hidden in the dark. Try tracing the edges slowly.</p>
    <p class="csr-secret">Hidden line: the launch date is March 4th.</p>
  </div>
  <div class="csr-lit" id="csrLit">
    <h2>The full story is here</h2>
    <p>Move your cursor across this panel — everything beneath the spotlight becomes clear while the rest stays hidden in the dark. Try tracing the edges slowly.</p>
    <p class="csr-secret">Hidden line: the launch date is March 4th.</p>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#050608;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:22px}

.csr-panel{position:relative;width:100%;max-width:620px;min-height:280px;border-radius:18px;overflow:hidden;background:#0a0c12;border:1px solid #1a1e29;cursor:none}
.csr-dim,.csr-lit{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.csr-dim{color:#262b38}
.csr-dim h2{font-size:24px;letter-spacing:-.01em}
.csr-dim p{font-size:14.5px;line-height:1.6}
.csr-secret{font-weight:700;color:#333}

.csr-lit{color:#f5f3ff}
.csr-lit h2{font-size:24px;letter-spacing:-.01em;background:linear-gradient(120deg,#c4b5fd,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.csr-lit p{font-size:14.5px;line-height:1.6;color:#d8d3ee}
.csr-secret{font-weight:700}
.csr-lit .csr-secret{color:#f0abfc}

/* The spotlight mask: a radial-gradient sized to a fixed spotlight radius,
   positioned via CSS custom properties updated on every mousemove — only
   the area within the gradient's opaque stop is visible. */
.csr-lit{
  -webkit-mask-image: radial-gradient(circle 120px at var(--csr-x, -200px) var(--csr-y, -200px), #000 55%, transparent 100%);
  mask-image: radial-gradient(circle 120px at var(--csr-x, -200px) var(--csr-y, -200px), #000 55%, transparent 100%);
  transition: -webkit-mask-image .02s linear;
}

var panel = document.getElementById('csrPanel');
var lit = document.getElementById('csrLit');

// Real mousemove tracking drives the mask's center position via CSS custom
// properties — the spotlight literally follows wherever the cursor is, it
// is not a canned hover-state animation.
function moveSpotlight(clientX, clientY) {
  var rect = panel.getBoundingClientRect();
  var x = clientX - rect.left;
  var y = clientY - rect.top;
  panel.style.setProperty('--csr-x', x + 'px');
  panel.style.setProperty('--csr-y', y + 'px');
}

panel.addEventListener('mousemove', function (e) {
  moveSpotlight(e.clientX, e.clientY);
});

panel.addEventListener('mouseleave', function () {
  panel.style.setProperty('--csr-x', '-200px');
  panel.style.setProperty('--csr-y', '-200px');
});

// Touch support: the spotlight follows a finger dragging across the panel.
panel.addEventListener('touchmove', function (e) {
  var t = e.touches[0];
  moveSpotlight(t.clientX, t.clientY);
}, { passive: true });
panel.addEventListener('touchend', function () {
  panel.style.setProperty('--csr-x', '-200px');
  panel.style.setProperty('--csr-y', '-200px');
});