A cute floating character that follows your cursor and reacts when clicked. smooth movement, click to stop/start, speech bubble toggle key (Shift + S)
// ==UserScript==
// @name Cursor Follower 👀
// @namespace http://tampermonkey.net/
// @version 1.3
// @description A cute floating character that follows your cursor and reacts when clicked. smooth movement, click to stop/start, speech bubble toggle key (Shift + S)
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
if (document.getElementById("sooptin")) return;
let enabled = true;
let moving = true;
// Create circle
const circle = document.createElement("div");
circle.id = "sooptin";
Object.assign(circle.style, {
position: "fixed",
top: "50px",
left: "50%",
transform: "translate(-50%, -50%)",
width: "70px",
height: "70px",
background: "black",
borderRadius: "50%",
display: "flex",
justifyContent: "space-evenly",
alignItems: "center",
zIndex: "999999",
cursor: "pointer"
});
// Create eyes
function createEye() {
const eye = document.createElement("div");
Object.assign(eye.style, {
width: "16px",
height: "16px",
background: "white",
borderRadius: "50%",
position: "relative",
overflow: "hidden"
});
const pupil = document.createElement("div");
Object.assign(pupil.style, {
width: "7px",
height: "7px",
background: "black",
borderRadius: "50%",
position: "absolute",
top: "4.5px",
left: "4.5px",
transition: "transform 0.05s linear"
});
eye.appendChild(pupil);
circle.appendChild(eye);
return pupil;
}
const pupils = [createEye(), createEye()];
document.body.appendChild(circle);
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
let x = mouseX;
let y = mouseY;
const ease = 0.15;
// Mouse tracking
document.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// Toggle movement + message
circle.addEventListener("click", () => {
moving = !moving;
const msg = document.createElement("div");
msg.innerText = "I'm Sooptin";
Object.assign(msg.style, {
position: "absolute",
top: "-25px",
left: "50%",
transform: "translateX(-50%)",
background: "white",
color: "black",
padding: "2px 6px",
borderRadius: "4px",
fontSize: "12px",
whiteSpace: "nowrap"
});
circle.appendChild(msg);
setTimeout(() => msg.remove(), 4000);
});
// Toggle whole script (Shift + S)
document.addEventListener("keydown", (e) => {
if (e.shiftKey && e.key.toLowerCase() === "s") {
enabled = !enabled;
circle.style.display = enabled ? "flex" : "none";
}
});
function animate() {
if (enabled && moving) {
x += (mouseX - x) * ease;
y += (mouseY - y) * ease;
circle.style.left = x + "px";
circle.style.top = y + "px";
}
// Eyes always follow
pupils.forEach((pupil) => {
const rect = pupil.parentElement.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const angle = Math.atan2(mouseY - cy, mouseX - cx);
const radius = 3;
pupil.style.transform = `translate(${Math.cos(angle)*radius}px, ${Math.sin(angle)*radius}px)`;
});
requestAnimationFrame(animate);
}
animate();
})();