聚光灯卡片

一团光跟着鼠标在卡片上走，照到哪亮到哪

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

光晕大小 300px 光晕强度 0.25 圆角 14px

代码

<div class="spot-card">…</div>
<script>
document.querySelectorAll('.spot-card').forEach(c => {
  c.addEventListener('pointermove', e => {
    const r = c.getBoundingClientRect();
    c.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    c.style.setProperty('--my', (e.clientY - r.top) + 'px');
  });
});
</script>
<style>
.spot-card { position: relative; overflow: hidden; border-radius: 14px; background: #1d1d1d; }
.spot-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.25), transparent 65%);
}
.spot-card:hover::before { opacity: 1; }
</style>

<!-- 结构同 html-css 档，外层类名换成 Tailwind： -->
<div class="group relative overflow-hidden rounded-[14px] bg-[#1d1d1d]">…</div>
<!-- 光晕层仍建议用一段自定义 CSS（radial-gradient + CSS 变量），Tailwind 任意值也可： -->
<!-- bg-[radial-gradient(300px_circle_at_var(--mx,50%)_var(--my,50%),rgba(255,255,255,0.25),transparent_65%)] -->

export function SpotlightCard({ children }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    ref.current.style.setProperty("--mx", (e.clientX - r.left) + "px");
    ref.current.style.setProperty("--my", (e.clientY - r.top) + "px");
  };
  return <div ref={ref} onPointerMove={onMove} className="spot-card">{children}</div>;
}
/* .spot-card 的 ::before 光晕 CSS 与 html-css 档相同 */

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

卡片上盖一层径向渐变光斑，JS 把鼠标坐标写进两个 CSS 变量（--mx / --my），渐变中心跟着变量走。光斑用 pointer-events: none 不挡点击。用 requestAnimationFrame 或直接写变量都行，关键是别在 mousemove 里做重排。

How it works (English)

A radial-gradient layer sits over the card; JS writes the cursor coordinates into two CSS variables (--mx / --my) and the gradient center follows. The layer uses pointer-events: none so it never blocks clicks. Keep the mousemove handler free of layout work.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

聚光灯卡片 · 提示词待复验 · →