Fire cursor with pulse, click burst, hotspot controls, collapse UI
// ==UserScript==
// @name Ultimate Cursor
// @namespace http://tampermonkey.net/
// @namespace https://violentmonkey.github.io
// @version 12.21.2
// @description Fire cursor with pulse, click burst, hotspot controls, collapse UI
// @match *://*/*
// @grant GM_getValue
// @grant GM_setValue
// @run-at document-start
// @license MIT
// ==/UserScript==
/*
MIT License
Copyright (c) 2026 Bradley Ganatra
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function() {
'use strict';
/* ===== STORAGE ===== */
const KEY_CURSOR_SRC="uc_cursor_src";
const KEY_SIZE="uc_size";
const KEY_HOTSPOT_X="uc_hotspot_x";
const KEY_HOTSPOT_Y="uc_hotspot_y";
const KEY_COLLAPSED="uc_collapsed";
const KEY_ANIM="uc_anim";
const KEY_CURSOR_HOVER_SRC="uc_cursor_hover_src";
/* ===== DEFAULTS ===== */
const DEFAULT_SIZE=60;
const DEFAULT_HOTSPOT_X=0;
const DEFAULT_HOTSPOT_Y=0;
const CLICK_SPRITE="https://image2url.com/r2/default/files/1770572370149-dd737899-cdee-45c4-8035-f5278b307c8d.png";
/* ===== LOAD ===== */
let cursorSrc=GM_getValue(KEY_CURSOR_SRC,null);
let size=GM_getValue(KEY_SIZE,DEFAULT_SIZE);
let hotspotX=GM_getValue(KEY_HOTSPOT_X,DEFAULT_HOTSPOT_X);
let hotspotY=GM_getValue(KEY_HOTSPOT_Y,DEFAULT_HOTSPOT_Y);
let collapsed=GM_getValue(KEY_COLLAPSED,false);
let animationsEnabled=GM_getValue(KEY_ANIM,true);
let hoverCursorSrc=GM_getValue(KEY_CURSOR_HOVER_SRC,null);
/* ===== HIDE REAL CURSOR ===== */
const hideStyle=document.createElement("style");
document.documentElement.appendChild(hideStyle);
function enableCursorHiding(){
hideStyle.textContent="*:not(.uc-panel):not(.uc-panel *):not(.uc-toggle){cursor:none !important}";
}
function disableCursorHiding(){
hideStyle.textContent="";
}
/* ===== CURSOR ===== */
const cursorImg = document.createElement("img"); // <-- declare it
Object.assign(cursorImg.style, {
position: "fixed",
pointerEvents: "none",
zIndex: "2147483647",
display: "none",
transform: "translate(-50%,-50%)",
transition: "transform 0.1s ease, width 0.1s ease, height 0.1s ease, opacity 0.1s ease"
});
/* ===== ANIMATIONS ===== */
const animStyle = document.createElement("style");
animStyle.textContent = `
@keyframes uc_pulse{
0%{transform:translate(-50%,-50%) scale(1);}
50%{transform:translate(-50%,-50%) scale(1.15);}
100%{transform:translate(-50%,-50%) scale(1);}
}
@keyframes uc_click_burst{
0%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}
100%{transform:translate(-50%,-50%) scale(.4);opacity:0;}
}
@keyframes uc_click_burst2{
0%{transform:translate(-50%,-50%) scale(2.4);opacity:1;}
100%{transform:translate(-50%,-50%) scale(.8);opacity:0;}
}
@keyframes uc_toggle_colors{
0%{background:#ff0000;}
50%{background:#ffaa00;}
100%{background:#ff00ff;}
}
`;
document.documentElement.appendChild(animStyle);
/* ===== CLICK FIRE 1 ===== */
const clickFire = document.createElement("img");
clickFire.src = CLICK_SPRITE;
Object.assign(clickFire.style, {
position: "fixed",
pointerEvents: "none",
zIndex: "2147483646",
display: "none",
transform: "translate(-50%,-50%)"
});
let clickTimeout = null;
/* ===== CLICK FIRE 2 ===== */
let clickFire2Enabled = true; // toggleable
const clickFire2 = document.createElement("img");
clickFire2.src = "https://image2url.com/r2/default/images/1770590681962-abe1ea6e-b8e0-41b6-bb7e-f531c74c24d0.png";
Object.assign(clickFire2.style, {
position: "fixed",
pointerEvents: "none",
zIndex: "2147483645",
display: "none",
transform: "translate(-50%,-50%)"
});
let clickTimeout2 = null;
/* ===== APPLY ===== */
function applyCursorState(){
if(!cursorSrc){
cursorImg.style.display="none";
clickFire.style.display="none";
disableCursorHiding();
return;
}
enableCursorHiding();
cursorImg.src=cursorSrc;
cursorImg.style.width=size+"px";
cursorImg.style.height=size+"px";
cursorImg.style.display="block";
}
/* ===== MOVE ===== */
document.addEventListener("mousemove",e=>{
const x=e.clientX-hotspotX+size/2;
const y=e.clientY-hotspotY+size/2;
cursorImg.style.left=x+"px";
cursorImg.style.top=y+"px";
let hoveringClickable = false;
if(hoveringClickable && hoverCursorSrc){
cursorImg.src=hoverCursorSrc;
}else{
cursorImg.src=cursorSrc;
}
clickFire.style.left=x+"px";
clickFire.style.top=y+"px";
clickFire2.style.left=x+"px";
clickFire2.style.top=y+"px";
});
/* ===== HOVER DETECTION ===== */
document.addEventListener("mousemove", e => {
const x = e.clientX - hotspotX + size / 2;
const y = e.clientY - hotspotY + size / 2;
cursorImg.style.left = x + "px";
cursorImg.style.top = y + "px";
// HOVER DETECTION FIX
const el = document.elementFromPoint(e.clientX, e.clientY);
const clickable = el && el.closest("button, a, input, select, textarea, [role='button']");
if (clickable && hoverCursorSrc) {
cursorImg.src = hoverCursorSrc;
} else {
cursorImg.src = cursorSrc;
}
clickFire.style.left = x + "px";
clickFire.style.top = y + "px";
clickFire2.style.left = x + "px";
clickFire2.style.top = y + "px";
});
/* ===== READY ===== */
function onReady(fn){
if(document.readyState==="loading"){
document.addEventListener("DOMContentLoaded",fn);
}else fn();
}
onReady(()=>{
document.body.appendChild(cursorImg);
document.body.appendChild(clickFire);
document.body.appendChild(clickFire2);
applyCursorState();
buildUI();
});
/* ===== CLICK ===== */
document.addEventListener("click",()=>{
if(!cursorSrc) return;
/* PULSE ALWAYS */
cursorImg.style.animation="uc_pulse 0.2s ease-out";
cursorImg.addEventListener("animationend",function handler(){
cursorImg.style.animation="";
cursorImg.removeEventListener("animationend",handler);
});
/* ===== ANIMATION 1 ===== */
if(animationsEnabled){
clickFire.style.width=size+"px";
clickFire.style.height=size+"px";
clickFire.style.display="block";
clickFire.style.animation="none";
void clickFire.offsetWidth;
clickFire.style.animation="uc_click_burst 1s forwards";
if(clickTimeout) clearTimeout(clickTimeout);
clickTimeout=setTimeout(()=>clickFire.style.display="none",1000);
}
/* ===== ANIMATION 2 ===== */
if(clickFire2Enabled){
clickFire2.style.width=size+"px";
clickFire2.style.height=size+"px";
clickFire2.style.display="block";
clickFire2.style.animation="none";
void clickFire2.offsetWidth;
clickFire2.style.animation="uc_click_burst2 1s forwards";
if(clickTimeout2) clearTimeout(clickTimeout2);
clickTimeout2=setTimeout(()=>clickFire2.style.display="none",1000);
}
});
/* ===== UI ===== */
function buildUI() {
const panel = document.createElement("div");
panel.className = "uc-panel";
Object.assign(panel.style, {
position: "fixed",
bottom: "10px",
left: "10px",
zIndex: "2147483647",
background: "rgba(0,0,0,0.8)",
color: "white",
padding: "8px",
borderRadius: "8px",
fontFamily: "sans-serif",
fontSize: "12px",
display: "flex",
flexDirection: "column",
gap: "6px"
});
/* ===== TITLE + COLLAPSE ===== */
const titleRow = document.createElement("div");
titleRow.style.display = "flex";
titleRow.style.justifyContent = "space-between";
const title = document.createElement("div");
title.textContent = "Ultimate Cursor";
const collapseBtn = document.createElement("button");
collapseBtn.textContent = "–";
titleRow.appendChild(title);
titleRow.appendChild(collapseBtn);
panel.appendChild(titleRow);
/* ===== BUTTONS ===== */
const uploadBtn = makeBtn("Upload", "#ff6600");
const uploadHoverBtn = makeBtn("Upload Hover", "#aa33ff");
const resetBtn = makeBtn("Reset", "#555");
resetBtn.onclick = () => {
cursorSrc = null;
hoverCursorSrc = null;
size = DEFAULT_SIZE;
hotspotX = DEFAULT_HOTSPOT_X;
hotspotY = DEFAULT_HOTSPOT_Y;
animationsEnabled = true;
clickFire2Enabled = true;
GM_setValue(KEY_CURSOR_SRC, null);
GM_setValue(KEY_CURSOR_HOVER_SRC, null);
GM_setValue(KEY_SIZE, size);
GM_setValue(KEY_HOTSPOT_X, hotspotX);
GM_setValue(KEY_HOTSPOT_Y, hotspotY);
GM_setValue(KEY_ANIM, animationsEnabled);
applyCursorState();
// Update sliders and checkboxes in UI if you want
document.querySelectorAll("input[type=range]").forEach(slider => slider.value = slider.defaultValue);
document.querySelectorAll("input[type=checkbox]").forEach(cb => cb.checked = true);
};
const btnRow = document.createElement("div");
btnRow.style.display = "flex";
btnRow.style.gap = "4px";
btnRow.appendChild(uploadBtn);
btnRow.appendChild(uploadHoverBtn);
btnRow.appendChild(resetBtn);
panel.appendChild(btnRow);
/* ===== MY CURSOR BUTTON ===== */
const myCursorBtn = document.createElement("button");
myCursorBtn.textContent = "My Cursor";
Object.assign(myCursorBtn.style, {
background: "#0099ff",
color: "white",
border: "none",
borderRadius: "4px",
padding: "4px 6px",
cursor: "pointer",
marginTop: "4px"
});
myCursorBtn.onclick = () => {
cursorSrc = "https://image2url.com/r2/default/images/1770589221898-d2f3408b-13d0-4983-8e89-dba02c9ea38d.png";
GM_setValue(KEY_CURSOR_SRC, cursorSrc);
applyCursorState();
};
panel.appendChild(myCursorBtn);
/* ===== ANIMATION 1 TOGGLE ===== */
const anim1Label = document.createElement("label");
anim1Label.textContent = "🔥 Animation 1 ";
const anim1Check = document.createElement("input");
anim1Check.type = "checkbox";
anim1Check.checked = animationsEnabled; // controls first fire
anim1Check.onchange = () => {
animationsEnabled = anim1Check.checked;
GM_setValue(KEY_ANIM, animationsEnabled);
};
anim1Label.appendChild(anim1Check);
panel.appendChild(anim1Label);
/* ===== ANIMATION 2 TOGGLE ===== */
const anim2Label = document.createElement("label");
anim2Label.textContent = "🔥 Animation 2 ";
const anim2Check = document.createElement("input");
anim2Check.type = "checkbox";
anim2Check.checked = clickFire2Enabled; // controls second fire
anim2Check.onchange = () => {
clickFire2Enabled = anim2Check.checked;
};
anim2Label.appendChild(anim2Check);
panel.appendChild(anim2Label);
/* ===== SLIDERS ===== */
panel.appendChild(makeSlider("Size", 32, 128, size, v => {
size = Number(v);
GM_setValue(KEY_SIZE, size);
applyCursorState();
}));
panel.appendChild(makeSlider("Hotspot X", 0, 128, hotspotX, v => {
hotspotX = Number(v);
GM_setValue(KEY_HOTSPOT_X, hotspotX);
}));
panel.appendChild(makeSlider("Hotspot Y", 0, 128, hotspotY, v => {
hotspotY = Number(v);
GM_setValue(KEY_HOTSPOT_Y, hotspotY);
}));
document.body.appendChild(panel);
/* ===== + TOGGLE ===== */
const toggle = document.createElement("button");
toggle.className = "uc-toggle";
toggle.textContent = "+";
Object.assign(toggle.style, {
position: "fixed",
bottom: "10px",
left: "10px",
width: "22px",
height: "22px",
border: "none",
display: "none",
zIndex: "2147483647",
animation: "uc_toggle_colors 1s infinite alternate"
});
document.body.appendChild(toggle);
function setCollapsed(state) {
collapsed = state;
GM_setValue(KEY_COLLAPSED, state);
panel.style.display = state ? "none" : "flex";
toggle.style.display = state ? "block" : "none";
}
setCollapsed(collapsed);
collapseBtn.onclick = () => setCollapsed(true);
toggle.onclick = () => setCollapsed(false);
/* ===== UPLOAD ===== */
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = "image/*";
fileInput.style.display = "none";
document.body.appendChild(fileInput);
/* NORMAL CURSOR UPLOAD */
uploadBtn.onclick = () => {
fileInput.onchange = e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = ev => {
cursorSrc = ev.target.result;
GM_setValue(KEY_CURSOR_SRC, cursorSrc);
applyCursorState();
};
reader.readAsDataURL(file);
};
fileInput.click();
};
/* HOVER CURSOR UPLOAD */
uploadHoverBtn.onclick = () => {
fileInput.onchange = e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = ev => {
hoverCursorSrc = ev.target.result;
GM_setValue(KEY_CURSOR_HOVER_SRC, hoverCursorSrc);
};
reader.readAsDataURL(file);
};
fileInput.click();
};
/* ===== HELPERS ===== */
function makeBtn(text, bg) {
const btn = document.createElement("button");
btn.textContent = text;
btn.style.background = bg;
btn.style.color = "white";
btn.style.border = "none";
btn.style.borderRadius = "4px";
btn.style.padding = "4px 6px";
btn.style.cursor = "pointer";
btn.style.flex = "1";
return btn;
}
function makeSlider(name, min, max, value, onChange) {
const wrap = document.createElement("div");
const label = document.createElement("div");
label.textContent = `${name}: ${value}`;
const slider = document.createElement("input");
slider.type = "range";
slider.min = min;
slider.max = max;
slider.value = value;
slider.oninput = () => {
label.textContent = `${name}: ${slider.value}`;
onChange(slider.value);
};
wrap.appendChild(label);
wrap.appendChild(slider);
return wrap;
}
} // ← THIS closes buildUI
})(); // ← THIS closes the userscript