Cursor Follower Dot

<div class="follower-dot-area">

  <div
    class="follower-dot"
    data-follower-dot
  ></div>

  <div class="follower-dot-content">
    Move your mouse inside this area
  </div>

</div>

.follower-dot-area{
  position:relative;
  width:100%;
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  cursor:none;
}

.follower-dot{
  position:absolute;
  top:0;
  left:0;

  width:12px;
  height:12px;

  border-radius:50%;
  background:#22d3ee;

  pointer-events:none;

  transform:translate(-50%, -50%);

  box-shadow:
    0 0 16px rgba(34,211,238,.55);

  z-index:9999;

  transition:
    left .08s linear,
    top .08s linear;
}

.follower-dot-content{
  position:relative;
  z-index:1;

  color:#c7d2e5;
  font-size:16px;
  font-weight:600;
  text-align:center;

  pointer-events:none;
}

const area =
  document.querySelector('.follower-dot-area');

const dot =
  document.querySelector('[data-follower-dot]');

if (area) {

  area.addEventListener(
    'mousemove',
    function(event) {

      if (!dot) {
        return;
      }

      const rect =
        area.getBoundingClientRect();

      dot.style.left =
        event.clientX -
        rect.left +
        'px';

      dot.style.top =
        event.clientY -
        rect.top +
        'px';
    }
  );

}

How This Cursor Follower Dot Works

This is one of the simplest cursor effects on this site, built around a single small glowing dot that trails the mouse pointer smoothly rather than snapping to it instantly. The HTML only needs two elements inside the container (follower-dot-area): the dot itself (follower-dot) and a text label.

The JavaScript logic is minimal — a single mousemove listener calculates the cursor’s position relative to the container and updates the dot’s left and top values, exactly like several other cursor effects on this site. What makes this component feel different, though, isn’t the JavaScript at all — it’s a small but important CSS detail: the transition property is applied directly to the left and top values themselves (transition: left .08s linear, top .08s linear). Because position changes are animated rather than applied instantly, the dot appears to smoothly glide toward the cursor’s new position instead of teleporting there, creating a subtle “catching up” effect during fast mouse movement.

The dot’s glow comes from a box-shadow with a soft cyan color, and like several other effects in this set, it stays hidden until the user hovers over the container, controlled through a simple CSS :hover rule.

Customizing This Cursor Follower Dot

This is one of the easiest components to customize, since almost every visual detail lives in one CSS rule:

• Change the dot’s color — update the background and box-shadow color values in .follower-dot (currently cyan) to match your theme.
• Adjust the dot’s size — modify the width and height values (currently 12px) for a larger or smaller follower.
• Control the “catch-up” delay — the .08s value in the transition property determines how closely the dot tracks the cursor; a smaller number makes it feel almost instant, while a larger number creates a more noticeable lag/trailing effect.
• Adjust the glow intensity — the box-shadow blur radius and opacity can be increased or decreased for a stronger or softer glow.

Where to Use This Cursor Follower Dot

Because this effect is subtle and lightweight, it works well as a general-purpose cursor replacement across a variety of contexts:

• Minimalist portfolio or blog websites, where a small glowing dot adds a touch of interactivity without being distracting.
• Dark-themed landing pages, where the glow effect stands out clearly against a dark background.
• Any section where a heavier cursor effect, like a large blob or ring, would feel too dominant.

This effect is intentionally understated, so it’s a good starting point if you want to add cursor interactivity to a site without a strong visual statement.

This effect is intentionally understated, so it’s a good starting point if you want to add cursor interactivity to a site without a strong visual statement. For a more expressive alternative, take a look at our Blob Cursor component, which adds a fluid, animated shape instead of a simple dot.

Frequently Asked Questions

Why does the dot lag slightly behind fast mouse movements?
This is intentional and is what gives the effect its smooth, trailing quality. Because the dot’s position changes are animated through a CSS transition rather than applied instantly, there’s a brief, deliberate delay as it catches up to the cursor — this is different from effects that snap to the exact cursor position immediately.

Can I make the dot follow the cursor with zero delay?
Yes — setting the transition duration to 0s (or removing the transition property from .follower-dot entirely) will make the dot snap to the cursor position instantly, matching the behavior of simpler cursor effects that don’t use this trailing technique.

Is this effect suitable for combining with other cursor components?
It’s generally best used on its own, since layering multiple custom cursor effects — like this dot alongside a ring or blob — on the same area can create visual clutter and conflicting cursor: none rules. Stick to one custom cursor effect per section for the cleanest result.