Cursor Glow
介绍
光晕带惯性跟随指针，后面拖着一串渐隐的光点。无人操作时沿李萨如曲线自己漂移。只更新 transform。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Cursor Glow 加进你的项目并换成你的配色。
适用场景
首屏、登录页和发布页的背景层：给大面积留白加一点质感，又不抢正文。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add cursor-glow
mcp › 使用 8pt MCP 调用 get_component("cursor-glow")
代码
Cursor Glow 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-glow"> <span class="x-glow__blob" aria-hidden="true"></span> <div class="x-glow__trail" aria-hidden="true"></div> <div class="x-glow__txt"><b>Move</b><span>指针在这里移动</span></div> </div>
.x-glow{position:relative;overflow:hidden;width:100%;height:100%;min-height:200px;background:var(--d-bg,#09090d);background-image:radial-gradient(var(--d-line,rgba(255,255,255,.12)) 1px,transparent 1.2px);background-size:16px 16px;cursor:crosshair}
.x-glow__blob{position:absolute;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--d-accent,#4D74FF) 55%,transparent),transparent);will-change:transform;pointer-events:none}
.x-glow__trail i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--d-fg,#fff);will-change:transform,opacity;pointer-events:none}
.x-glow__txt{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none}
.x-glow__txt b{font:800 clamp(34px,7vw,64px)/1 var(--d-font,system-ui,sans-serif);letter-spacing:-.05em;color:var(--d-fg,#fff);mix-blend-mode:difference}
.x-glow__txt span{font:12px/1 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}const init = (root) => {
const box = root.querySelector('.x-glow'), blob = box.querySelector('.x-glow__blob'), trail = box.querySelector('.x-glow__trail');
const N = 14, dots = [];
for (let i = 0; i < N; i++) { const d = document.createElement('i'); trail.appendChild(d); dots.push({ el: d, x: 0, y: 0 }); }
let w = 0, h = 0, tx = 0, ty = 0, x = 0, y = 0, user = false, last = 0, raf = 0, vis = false, t = 0;
const size = () => { const r = box.getBoundingClientRect(); w = r.width; h = r.height; if (!x) { x = tx = w / 2; y = ty = h / 2; } };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const loop = (now) => {
if (!user || now - last > 2500) { user = false; t += 0.012; tx = w / 2 + Math.sin(t * 1.3) * w * 0.32; ty = h / 2 + Math.sin(t * 2.1) * h * 0.28; }
x += (tx - x) * 0.12; y += (ty - y) * 0.12;
blob.style.transform = `translate(${x}px, ${y}px)`;
let px = x, py = y;
…订阅 Builder 查看完整源码。查看价格