Overlay a Mac-style cursor (black fill, white border) that follows the real cursor and hides the system cursor. Works on iPadOS Safari (Userscripts) and desktop.
// ==UserScript==
// @name Mac-style Overlay Cursor
// @namespace https://greasyfork.org/en/users/000000
// @version 1.0
// @description Overlay a Mac-style cursor (black fill, white border) that follows the real cursor and hides the system cursor. Works on iPadOS Safari (Userscripts) and desktop.
// @author NotNightmare
// @match *://*/*
// @run-at document-start
// @grant none
// ==/UserScript==
(function () {
'use strict';
const CURSOR_SIZE = 24;
if (window.__macCursorOverlayActive) return;
window.__macCursorOverlayActive = true;
const style = document.createElement('style');
style.textContent = `
html, body {
cursor: none !important;
}
.mac-cursor-overlay {
position: fixed;
width: ${CURSOR_SIZE}px;
height: ${CURSOR_SIZE}px;
pointer-events: none;
z-index: 999999;
transform: translate(-2px, -1px);
}
.mac-cursor-shape {
width: 0;
height: 0;
border-style: solid;
border-width: ${CURSOR_SIZE}px 0 0 ${CURSOR_SIZE}px;
border-color: transparent transparent transparent black;
filter:
drop-shadow(1px 0 white)
drop-shadow(0 1px white)
drop-shadow(-1px 0 white)
drop-shadow(0 -1px white)
drop-shadow(2px 2px rgba(0,0,0,0.3));
}
`;
document.documentElement.appendChild(style);
const cursor = document.createElement('div');
cursor.className = 'mac-cursor-overlay';
const arrow = document.createElement('div');
arrow.className = 'mac-cursor-shape';
cursor.appendChild(arrow);
document.documentElement.appendChild(cursor);
let x = window.innerWidth / 2;
let y = window.innerHeight / 2;
let raf = null;
function update() {
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
raf = null;
}
function move(e) {
if (e.pointerType === 'touch') return;
x = e.clientX;
y = e.clientY;
if (!raf) raf = requestAnimationFrame(update);
}
window.addEventListener('pointermove', move, { passive: true });
window.addEventListener('mousemove', move, { passive: true });
})();