Responsive cursor — a companion, not an arrow

The recipe for a custom cursor has three organs: hide the real cursor and draw a replacement (here, a soft circle that follows with a tiny lag — the lag alone makes it feel alive), let movement shed sparkles, and make presses an event — the circle flinches, then pops into an ember burst and an expanding ring. Press Run, then move over the canvas and click.

canvas.style.cursor = "none";     // we bring our own
let px = W / 2, py = H / 2;       // where the pointer really is
let cx = px, cy = py;             // where the soft circle is (it lags — on purpose)
let squish = 1;                   // 1 = round; dips when pressed
let squishV = 0;                  // …and how fast it is un-dipping: the flinch is a SPRING
let parts = [], rings = [];

canvas.onpointermove = (e) => {
  const r = canvas.getBoundingClientRect();
  px = e.clientX - r.left;  py = e.clientY - r.top;
};
canvas.onpointerdown = () => {
  squish = 0.45;                             // flinch…
  rings.push({ x: cx, y: cy, r: 10, a: 0.9 });   // …ring…
  for (let i = 0; i < 26; i++) {             // …and ember burst
    const a = rand(0, 7), sp = rand(40, 200);
    parts.push({ x: cx, y: cy, vx: Math.cos(a) * sp,
                 vy: Math.sin(a) * sp - 40,
                 life: rand(0.3, 0.7), max: 0.7, ember: true });
  }
};

onFrame((dt, t) => {
  ctx.fillStyle = "#14111F";  ctx.fillRect(0, 0, W, H);

// the circle chases the pointer — the lag is the personality
  const moved = Math.hypot(px - cx, py - cy);
  cx += (px - cx) * Math.min(1, dt * 12);
  cy += (py - cy) * Math.min(1, dt * 12);
  // the flinch springs back to round — a real spring, under-damped, so it
  // overshoots past round into a tall wobble before it settles. a lerp here
  // would only ever decay, and a body that never overshoots reads as dead
  squishV += ((1 - squish) * 380 - squishV * 14) * dt;
  squish += squishV * dt;

// moving fast sheds a sparkle or two
  if (moved > 3) parts.push({
    x: cx + rand(-6, 6), y: cy + rand(-6, 6), vx: rand(-15, 15),
    vy: rand(-15, 15), life: rand(0.3, 0.8), max: 0.8, ember: false });

ctx.globalCompositeOperation = "lighter";

// sparkles + embers (same life rules, different costumes)
  for (const p of parts) {
    p.x += p.vx * dt;  p.y += p.vy * dt;  p.life -= dt;
    const u = Math.max(0, p.life / p.max);
    ctx.globalAlpha = u;
    ctx.fillStyle = p.ember
      ? (u > 0.5 ? "#FFD9A0" : "#E8734A")     // burst: gold cooling to ember
      : "#FFFFFF";                            // trail: tiny white sparkles
    ctx.beginPath();
    ctx.arc(p.x, p.y, (p.ember ? 2.6 : 1.6) * u + 0.4, 0, 7);
    ctx.fill();
  }
  ctx.globalAlpha = 1;

// pop rings from presses
  for (const g of rings) {
    g.r += 160 * dt;  g.a -= 2.2 * dt;
    if (g.a <= 0) continue;
    ctx.strokeStyle = "rgba(255,205,150," + g.a + ")";
    ctx.lineWidth = 2.5;
    ctx.beginPath();  ctx.arc(g.x, g.y, g.r, 0, 7);  ctx.stroke();
  }

// the cursor itself: a soft breathing circle (squishes on press)
  const breathe = 1 + 0.05 * Math.sin(t * 2.4);
  const rx = 13 * breathe / Math.sqrt(Math.max(0.05, squish));
  const ry = 13 * breathe * Math.sqrt(Math.max(0.05, squish));
  const soft = ctx.createRadialGradient(cx, cy, 1, cx, cy, rx * 1.9);
  soft.addColorStop(0, "rgba(201,194,255,0.75)");
  soft.addColorStop(1, "rgba(201,194,255,0)");
  ctx.fillStyle = soft;
  ctx.beginPath();  ctx.arc(cx, cy, rx * 1.9, 0, 7);  ctx.fill();
  ctx.strokeStyle = "rgba(230,226,255,0.9)";
  ctx.lineWidth = 1.5;
  ctx.beginPath();  ctx.ellipse(cx, cy, rx, ry, 0, 0, 7);  ctx.stroke();

// two tiny satellites orbiting the circle
  for (let k = 0; k < 2; k++) {
    const a = t * 1.6 + k * Math.PI;
    ctx.fillStyle = "rgba(255,255,255,0.9)";
    ctx.beginPath();
    ctx.arc(cx + Math.cos(a) * rx * 1.5, cy + Math.sin(a) * ry * 1.5, 1.4, 0, 7);
    ctx.fill();
  }

ctx.globalCompositeOperation = "source-over";
  parts = parts.filter(p => p.life > 0);
  rings = rings.filter(g => g.a > 0);
});

On a touch screen there is no resting cursor at all — the circle simply appears under your finger, and the press-pop becomes the whole show. Same code, both worlds, thanks to pointer events.

Try tweaking: the chase speed dt * 12 → dt * 4 (dreamy) → dt * 40 (eager) · squish = 0.45 → 0.15 (dramatic flinch) · the flinch spring's damping 14 → 40 (critically damped: no wobble) → 5 (jelly) · burst count 26 → 80 · ring speed 160 → 420 (real pop) · sparkle threshold moved > 3 → 0 (sheds constantly).

Web (DOM): cursor: none plus a position: fixed element following pointermove — and only where a replacement is drawn; never hide the cursor and offer nothing back. In Godot: Input.set_custom_mouse_cursor() for a static image; the living companion — hidden mouse, eased chase, distance-shed sparkles, press-pop — is cursor_sparkle.gd, ready to download. In Unity: Cursor.SetCursor() / Cursor.visible = false + a UI element tracking the pointer. In Unreal: SetMouseCursorWidget() — a full animated UMG widget as the cursor. Chapter 12.