Neon Cursor

Three layers — dot, ring, and glow halo — each spring-animate toward the cursor at different speeds for a depth effect. Fully color-customizable.

Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.

cursorneonspringglowinteractive

Live Preview — customize or regenerate this in the workspace

Loading preview…

Design Intent

A cursor made of three spring-animated layers: a fast dot at the pointer position, a lagging ring, and a slow soft glow halo behind both.

CSS

css

* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; cursor: none; }
    .hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: sans-serif; font-size: 16px; color: #ffffff; opacity: 0.45; pointer-events: none; user-select: none; letter-spacing: 0.04em; }
    .c-dot {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 10px; height: 10px;
      background: #ec6517;
      box-shadow: 0 0 6px 2px #ec6517;
      transform: translate(-50%,-50%);
      z-index: 9999;
    }
    .c-ring {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 40px; height: 40px;
      border: 2px solid #ec6517;
      box-shadow: 0 0 8px 1px #ec6517, inset 0 0 8px 1px #ec6517;
      transform: translate(-50%,-50%);
      z-index: 9998;
    }
    .c-glow {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 80px; height: 80px;
      background: #ec6517;
      opacity: 0.18;
      transform: translate(-50%,-50%);
      z-index: 9997;
    }

HTML

html

<p class="hint">Move your cursor here</p>
  <div class="c-glow" id="glow"></div>
  <div class="c-ring" id="ring"></div>
  <div class="c-dot"  id="dot"></div>

Full Source

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; cursor: none; }
    .hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: sans-serif; font-size: 16px; color: #ffffff; opacity: 0.45; pointer-events: none; user-select: none; letter-spacing: 0.04em; }
    .c-dot {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 10px; height: 10px;
      background: #ec6517;
      box-shadow: 0 0 6px 2px #ec6517;
      transform: translate(-50%,-50%);
      z-index: 9999;
    }
    .c-ring {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 40px; height: 40px;
      border: 2px solid #ec6517;
      box-shadow: 0 0 8px 1px #ec6517, inset 0 0 8px 1px #ec6517;
      transform: translate(-50%,-50%);
      z-index: 9998;
    }
    .c-glow {
      position: fixed; pointer-events: none; border-radius: 50%;
      width: 80px; height: 80px;
      background: #ec6517;
      opacity: 0.18;
      transform: translate(-50%,-50%);
      z-index: 9997;
    }
  </style>
</head>
<body>
  <p class="hint">Move your cursor here</p>
  <div class="c-glow" id="glow"></div>
  <div class="c-ring" id="ring"></div>
  <div class="c-dot"  id="dot"></div>
  <script>
    var dot  = document.getElementById('dot');
    var ring = document.getElementById('ring');
    var glow = document.getElementById('glow');
    var mouse = {x: -200, y: -200};
    var rp = {x: -200, y: -200, vx: 0, vy: 0};
    var gp = {x: -200, y: -200, vx: 0, vy: 0};
    var last = null;

    function spring(p, t, tension, friction, mass, dt) {
      p.vx += (tension * (t.x - p.x) - friction * p.vx) / mass * dt;
      p.vy += (tension * (t.y - p.y) - friction * p.vy) / mass * dt;
      p.x += p.vx * dt; p.y += p.vy * dt;
    }

    function tick(ts) {
      if (!last) last = ts;
      var dt = Math.min((ts - last) / 1000, 0.05);
      last = ts;

      dot.style.left = mouse.x + 'px'; dot.style.top = mouse.y + 'px';

      spring(rp, mouse, 400, 28, 0.8, dt);
      ring.style.left = rp.x + 'px'; ring.style.top = rp.y + 'px';

      spring(gp, mouse, 150, 35, 1.2, dt);
      glow.style.left = gp.x + 'px'; glow.style.top = gp.y + 'px';

      requestAnimationFrame(tick);
    }

    document.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; });
    requestAnimationFrame(tick);
  </script>
</body>
</html>

Customize in Workspace Browse Cursor Effects

More Cursor Effects Animations

Rainbow Cursor

A multi-colored canvas trail that follows the cursor with smooth color cycling and a pulsing line width

Blob Cursor

Three spring-physics blobs that chase the cursor and merge into a single fluid shape via an SVG goo filter

Trailing Cursor

A chain of fading dots that follow the cursor with a configurable trail length, speed, and color