Components / Motion / Spotlight

Spotlight beta

A soft light that follows the cursor across a card's surface. Nothing moves but the light.

Preview

Blocks, assembled

Move your cursor across this card. The surface responds; nothing else does.

<div class="k-spot" data-spot style="max-width:400px;padding:20px">
  <p style="font-size:16.5px;font-weight:600">Blocks, assembled</p>
  <p style="font-size:13px;color:var(--k-ink-2);line-height:1.7;margin-top:5px">Move your cursor across this card. The surface responds; nothing else does.</p>
</div>

/* KATA Spotlight */
.k-spot{position:relative;overflow:hidden;border:1px solid var(--k-line);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.k-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--k-accent-bg-strong),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.k-spot:hover::before{opacity:1}
.k-spot > *{position:relative}

// KATA Spotlight — the light follows the pointer.
document.querySelectorAll('[data-spot]').forEach(function (el) {
  el.addEventListener('pointermove', function (e) {
    var r = el.getBoundingClientRect();
    el.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%');
    el.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%');
  });
});

Usage

For feature grids and plan cards that should feel alive without moving. The light is the accent at low strength; the content never shifts.

Accessibility

Decoration only — it never appears on touch or keyboard, and nothing depends on it. The card works identically without the script.

Reorder

Text reveal