Spotlight Card
Overview
A spotlight follows the pointer and lights up the card border. Only transform moves, so scrolling and hovering stay smooth.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Spotlight Card to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add spotlight-card
mcp › Use 8pt MCP to call get_component("spotlight-card")
Code
Source for Spotlight Card. Motion uses only transform and opacity and respects the Reduce motion setting.
<article class="x-spot">
<span class="x-spot__ring" aria-hidden="true"><i></i></span>
<span class="x-spot__light" aria-hidden="true"></span>
<div class="x-spot__body">
<span class="x-spot__tag">MCP</span>
<h3>One entry point, every model</h3>
<p>Components and Skills, straight into your editor.</p>
</div>
</article>.x-spot{position:relative;overflow:hidden;isolation:isolate;width:min(320px,100%);padding:26px;border-radius:18px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.08));color:var(--d-fg,#fff)}
.x-spot__light,.x-spot__ring i{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--d-accent,#4D74FF) 45%,transparent),transparent 65%);opacity:0;transition:opacity .35s;will-change:transform;pointer-events:none}
.x-spot__light{z-index:-1}
.x-spot__ring{position:absolute;inset:0;border-radius:inherit;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.x-spot__ring i{background:radial-gradient(circle,var(--d-accent,#4D74FF),transparent 60%)}
.x-spot:hover .x-spot__light,.x-spot:hover .x-spot__ring i{opacity:1}
.x-spot__tag{display:inline-block;padding:4px 9px;border-radius:999px;font:600 11px/1 ui-monospace,monospace;border:1px solid var(--d-line,rgba(255,255,255,.12));color:var(--d-muted,#a0a0ab)}
.x-spot h3{margin:16px 0 8px;font:600 19px/1.25 var(--d-font,system-ui,sans-serif);letter-spacing:-.01em}
.x-spot p{margin:0;font:14px/1.6 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#a0a0ab)}const init = (root) => {
const card = root.querySelector('.x-spot');
const layers = card.querySelectorAll('.x-spot__light, .x-spot__ring i');
let x = 0, y = 0, raf = 0;
card.addEventListener('pointermove', e => {
const r = card.getBoundingClientRect(); x = e.clientX - r.left; y = e.clientY - r.top;
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => layers.forEach(l => l.style.transform = `translate(${x}px, ${y}px)`));
});
};Subscribe to Builder to see the full source.See pricing