Cursor Trail Effect

<div class="cursor-trail-area">

  <div class="cursor-trail-message">
    Move your mouse inside this area
  </div>

</div>

.cursor-trail-area{
  position:relative;
  width:100%;
  min-height:220px;

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

  overflow:hidden;
  cursor:crosshair;
}

.cursor-trail-message{
  position:relative;
  z-index:1;

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

  pointer-events:none;
}

.cursor-trail-dot{
  position:absolute;
  z-index:9999;

  width:14px;
  height:14px;

  border-radius:50%;

  background:#22d3ee;

  pointer-events:none;

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

  box-shadow:
    0 0 18px rgba(34,211,238,.45);

  animation:
    cursorTrailFade .55s ease-out forwards;
}

@keyframes cursorTrailFade{

  0%{
    opacity:1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(.2);
  }
}

const area =
  document.querySelector('.cursor-trail-area');

if (area) {

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

      const rect =
        area.getBoundingClientRect();

      const dot =
        document.createElement('span');

      dot.className =
        'cursor-trail-dot';

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

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

      area.appendChild(dot);

      setTimeout(
        function() {
          dot.remove();
        },
        550
      );
    }
  );

}

How This Cursor Trail Effect Works

This effect leaves a trail of small glowing dots behind the mouse as it moves — similar in spirit to the gradient cursor trail elsewhere on this site, but built with a more direct, simpler approach. The HTML here is about as minimal as it gets: just a single container (cursor-trail-area) with a text label, and no dedicated cursor element defined in advance.

That’s because, unlike other tracking effects on this site that move one pre-existing element, this component creates a brand-new span element on every single mousemove event. Each time the mouse moves even slightly, the JavaScript generates a new dot (cursor-trail-dot), positions it at the exact cursor coordinates using getBoundingClientRect(), and appends it to the container. A setTimeout then removes that specific dot after 550 milliseconds — matching the exact duration of its CSS fade animation.

The fading itself is handled by a @keyframes animation called cursorTrailFade, which shrinks each dot from full size down to 20% scale while fading its opacity from 1 to 0. Because a new dot is created on nearly every pixel of mouse movement, fast cursor movement produces a dense, continuous-looking trail made up of dozens of individual fading dots rather than one single moving shape.

Customizing This Cursor Trail Effect

This effect’s look can be adjusted through a few key CSS and JavaScript values:

• Change the dot color — update the background and box-shadow values in .cursor-trail-dot (currently cyan) to match your theme.
• Adjust dot size — modify the width and height values (currently 14px) for larger or smaller trail dots.
• Control the trail’s density — since a new dot is created on every mousemove event, you could add a simple timing check in the JavaScript to only create a dot every few milliseconds, producing a sparser, less dense trail.
• Adjust the fade duration — the .55s animation duration (and the matching 550 value in the setTimeout) controls how long each dot lingers before disappearing; both values need to be changed together to stay in sync.

Where to Use This Cursor Trail Effect

Because this effect produces a dense, continuous stream of dots, it suits contexts where a lively, energetic feel is desired:

• Gaming or entertainment websites, where a dynamic trail adds a sense of motion and interactivity.
• Creative hero sections, used as an eye-catching background detail on landing pages.
• Interactive art or experimental project pages, where the trail itself becomes part of the visual experience.

If you’d prefer a softer, more restrained version of this same concept — with blurred, gradient-colored particles instead of solid dots — the Gradient Cursor Trail component on this site offers a gentler alternative built on a similar underlying technique.

Frequently Asked Questions

How is this different from the Gradient Cursor Trail on this site?
Both effects generate elements dynamically as the mouse moves, but this cursor trail effect uses small solid dots with a simple scale-and-fade animation, while the gradient version applies a blurred radial gradient to each particle and limits how many particles can exist at once for a softer, more controlled look.

Will creating a new element on every mouse movement slow down my page?
Generally not, since each dot is automatically removed from the DOM after 550 milliseconds via setTimeout, matching its animation duration exactly. This keeps the total number of active elements manageable even during fast, continuous mouse movement.

Can I limit how many dots appear at once for a lighter effect?
Yes, though it requires a small JavaScript change — for example, only creating a new dot if a certain amount of time has passed since the last one, using a timestamp check inside the mousemove listener. This isn’t included by default, since the current version favors a denser, more continuous trail.