Custom Cursor Effects
Turn a plain arrow into a design statement. Dot followers, rings, trails, glow orbs, and text cursors — all generated for Squarespace Code Injection.
Controls
<style>
body { cursor: none !important; }
a, button, input, textarea, select { cursor: none !important; }
</style>
<style>
.sq-cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: #000000;
border-radius: 50%;
pointer-events: none;
z-index: 99999;
mix-blend-mode: normal;
transition: transform 0.1s ease;
transform: translate(-50%, -50%);
}
.sq-cursor-ring {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
border: 1.5px solid #000000;
border-radius: 50%;
pointer-events: none;
z-index: 99998;
mix-blend-mode: normal;
opacity: 0.5;
transform: translate(-50%, -50%);
}
</style>
<script>
(function() {
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
// Touch device detected — skip custom cursor
} else {
var dot = document.createElement('div');
dot.className = 'sq-cursor-dot';
document.body.appendChild(dot);
var ring = document.createElement('div');
ring.className = 'sq-cursor-ring';
document.body.appendChild(ring);
var mouseX = 0, mouseY = 0;
var dotX = 0, dotY = 0, ringX = 0, ringY = 0;
document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animate() {
dotX += (mouseX - dotX) * 0.15;
dotY += (mouseY - dotY) * 0.15;
ringX += (mouseX - ringX) * 0.075;
ringY += (mouseY - ringY) * 0.075;
dot.style.left = dotX + 'px';
dot.style.top = dotY + 'px';
ring.style.left = ringX + 'px';
ring.style.top = ringY + 'px';
requestAnimationFrame(animate);
}
animate();
document.addEventListener('mousedown', function() {
dot.style.transform = 'translate(-50%, -50%) scale(0.7)';
ring.style.transform = 'translate(-50%, -50%) scale(0.8)';
});
document.addEventListener('mouseup', function() {
dot.style.transform = 'translate(-50%, -50%) scale(1)';
ring.style.transform = 'translate(-50%, -50%) scale(1)';
});
}
})();
</script>Why this matters
Instant brand personality
A custom cursor tells visitors they're somewhere special. It's the digital equivalent of a velvet rope — subtle, but you feel the difference.
Zero performance cost
requestAnimationFrame keeps everything buttery smooth. The cursor elements are tiny DOM nodes — no canvas, no WebGL, no performance hit.
Touch-device aware
Cursors don't exist on mobile. Our generated code detects touch devices and gracefully skips the effect — no broken UX on phones or tablets.
How to add this to Squarespace
Copy the generated code above using the Copy button.
In your Squarespace dashboard, go to Settings → Advanced → Code Injection.
Paste the code into the Footer section.
Click Save. Visit your site and move your mouse to see the effect.
A little over your head?
No shame — this stuff is hard. Let the pros handle it.
