Spotlight Card
介绍
光斑跟随指针移动，同时点亮卡片边框。只移动 transform，滚动和悬停都不掉帧。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Spotlight Card 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add spotlight-card
mcp › 使用 8pt MCP 调用 get_component("spotlight-card")
代码
Spotlight Card 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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>一个入口，所有模型</h3>
<p>组件与 Skill 直接进入你的编辑器。</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)`));
});
};订阅 Builder 查看完整源码。查看价格