Custom Circle Cursor

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

  <div
    class="custom-circle-cursor"
    data-circle-cursor
  ></div>

  <div class="cursor-demo-content">
    Move your mouse inside this area
  </div>

</div>

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

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

  overflow:hidden;
  cursor:none;
}

.custom-circle-cursor{
  position:absolute;
  top:0;
  left:0;

  width:32px;
  height:32px;

  border:2px solid #22d3ee;
  border-radius:50%;

  background:rgba(34,211,238,.06);

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

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

  pointer-events:none;
  z-index:9999;
}

.cursor-demo-content{
  position:relative;
  z-index:1;

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

  pointer-events:none;
}

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

const cursor =
  document.querySelector('[data-circle-cursor]');

if (area) {

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

      if (!cursor) {
        return;
      }

      const rect =
        area.getBoundingClientRect();

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

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

}

How This Custom Circle Cursor Works

This effect replaces the default pointer with a simple outlined circle that tracks mouse movement — a clean, minimal alternative to more elaborate cursor effects. The HTML only needs two elements inside the container (cursor-demo-area): the circle cursor itself (custom-circle-cursor) and a text label.

The JavaScript follows the standard positioning pattern used across this site’s cursor components — a single mousemove listener calculates the pointer’s position relative to the container using getBoundingClientRect(), then updates the circle’s left and top values accordingly. Unlike the cursor ring hover effect elsewhere on this site, there’s no additional logic here for detecting hover states on specific buttons or links — this component only tracks position, nothing more.

Visually, the circle is built with a transparent background and a 2px cyan border, giving it an outlined, minimal look rather than a filled shape. A soft box-shadow adds a subtle glow around the edge, and like most cursor effects in this collection, it fades in on hover through a simple CSS :hover rule rather than JavaScript. The transition property on width, height, and background is included specifically to support any future customization involving size or color changes, even though the default behavior keeps the circle at a constant 32px.

Customizing This Custom Circle Cursor

Because this effect keeps its logic minimal, most adjustments happen directly through CSS:

• Change the circle’s color — update the border color and box-shadow values in .custom-circle-cursor (currently cyan) to match your site’s theme.
• Adjust the circle’s size — modify the width and height values (currently 32px) for a larger or smaller cursor outline.
• Add a fill color — the background property is currently a very faint cyan tint; increasing its opacity would create a more solid, filled circle instead of a purely outlined one.
• Adjust border thickness — the border: 2px solid value can be increased for a bolder outline or reduced for a finer, more delicate line.

Where to Use This Custom Circle Cursor

Since this effect is intentionally simple and doesn’t react to specific elements, it works well as a general-purpose cursor replacement:

• Minimalist and editorial-style websites, where a clean outlined circle fits a restrained design aesthetic.
• Photography or design portfolios, adding a touch of interactivity without visual noise.
• Any section where you want basic cursor customization without needing hover-triggered size changes or color shifts tied to specific elements.

If you need the cursor to react differently when hovering over buttons or links — expanding, changing color, or showing text — the Cursor Ring Hover Effect component on this site adds that interactive layer on top of a similar circular base.

Frequently Asked Questions

How is this different from the Cursor Ring Hover Effect on this site?
Both use a similar circular outline design, but this custom circle cursor only tracks mouse position and stays visually constant throughout. The cursor ring hover effect builds on this same foundation but adds mouseover/mouseout listeners that expand the ring and change its color when hovering over specific buttons or links.

Can I make the circle change size when hovering over certain elements?
Not with the current JavaScript, since it only listens for mousemove. To add that behavior, you’d need to extend the script with mouseover and mouseout listeners that toggle a CSS class, similar to the approach used in the cursor ring hover effect.

Is a plain outlined cursor better than a filled one for readability?
It depends on your background. An outlined cursor like this one tends to stay visible against both light and dark content since it doesn’t fully obscure what’s underneath it, while a filled cursor can sometimes cover small text or icons it passes over.