Custom Dot Cursor

Preview instructions on Desktop :)

In the left sidebar from the Site Tab, click SITE SETTINGS to open up the panel. From the popup, select Integrations. This is where you will see we've built in global settings site wide (this means you can use it on any page). Under the nested Integrations, select Site Customizations.

If you are adding to an existing website, you will need to add the custom code in order for your effects to work. To do this, go to SITE SETTINGS. Click the Integrations tab and select + Add Custom Code. In the center panel, select + ADD CODE TO... and from the dropdown, select Add HTML to the head and paste:

Paste Into Pre-Existing Site

<script>
(function () {
// Prevent double-init if the script runs more than once
if (window.nfCursorInit) return;
window.nfCursorInit = true;

function initCursor() {
if (document.querySelector('.custom-cursor-wrapper')) return; // already exists

const wrapper = document.createElement('div');
wrapper.className = 'custom-cursor-wrapper';

const dot = document.createElement('span');
dot.className = 'dot-cursor custom-cursor';

wrapper.appendChild(dot);
document.body.appendChild(wrapper);

// Move cursor with the mouse
document.addEventListener('mousemove', (e) => {
wrapper.style.transform =
'translate(' + (e.pageX - window.scrollX) + 'px, ' + (e.pageY - window.scrollY) + 'px)';
});

// Link hover via delegation — catches every <a>, including ones rendered later
document.addEventListener('mouseover', (e) => {
if (e.target.closest('a')) dot.classList.add('link-hover');
});
document.addEventListener('mouseout', (e) => {
const to = e.relatedTarget;
// only drop the class when actually leaving the link (not moving to its child)
if (e.target.closest('a') && !(to && to.closest && to.closest('a'))) {
dot.classList.remove('link-hover');
}
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCursor);
} else {
initCursor();
}
})();
</script>

2. Additionally, copy and paste all code in ADVANCED SETTINGS > PAGE LOADED JAVASCRIPT:

/* Remove Standard Cursor /
body { cursor: none; }
a { cursor: none !important; }

/ Custom Cursor Wrapper /
.custom-cursor-wrapper {
position: fixed;
top: -6rem;
left: -6rem;
width: 12rem;
height: 12rem;
border-radius: 50%;
pointer-events: none !important;
mix-blend-mode: difference !important;
z-index: 9999;
user-select: none;
transition: transform 0.1s linear;
}

/ Custom Cursor Dot */
.custom-cursor {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff !important;
mix-blend-mode: difference !important;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, background-color 0.2s ease;
}

.custom-cursor.link-hover {
transform: translate(-50%, -50%) scale(4) !important;
}

1. To make animation work, paste in ADVANCED SETTINGS > CUSTOM CSS: