Squarespace Dot Cursor Plugin

Live Demo

This plugin replaces the cursor with a dot. The dot color inverses whatever color is behind it. Hover over the image below to see the effect.

Notes:

Compatible with Squarespace 7.1
Requires Core/Business Plan or Higher

Tips:

To change the size of the dot, you must change the width and height in both the CSS and Javascript (two places).

Hover over this image!

Dot Cursor Plugin Demo

Add to Page Header:

  
    <style>
/* Hide default cursor and create custom dot cursor */
* {
  cursor: none !important;
}

/* Create the custom dot cursor */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

/* JavaScript to make the dot follow the mouse */
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Create the cursor dot element
  const cursor = document.createElement('div');
  cursor.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
  `;
  
  document.body.appendChild(cursor);
  
  // Update cursor position on mouse move
  document.addEventListener('mousemove', function(e) {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Hide cursor when mouse leaves the window
  document.addEventListener('mouseleave', function() {
    cursor.style.opacity = '0';
  });
  
  // Show cursor when mouse enters the window
  document.addEventListener('mouseenter', function() {
    cursor.style.opacity = '1';
  });
});
</script>
  