Cursor Glow
Overview
A glow follows the pointer with inertia, trailing fading sparks. When nobody is interacting it drifts along a Lissajous curve. Only transform updates.
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 Cursor Glow to your project in your colors.
Where to use it
Background layers for heroes, login pages and launch pages: adds texture to large empty areas without competing with the content.
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 cursor-glow
mcp › Use 8pt MCP to call get_component("cursor-glow")
Code
Source for Cursor Glow. Motion uses only transform and opacity and respects the Reduce motion setting.
<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>Move your pointer here</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;
…Subscribe to Builder to see the full source.See pricing