Cursor Follower 👀

A cute floating character that follows your cursor and reacts when clicked. smooth movement, click to stop/start, speech bubble toggle key (Shift + S)
بۇ قوليازمىنى قاچىلاش ؟
سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.
Wrap lines
// ==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();

})();