Help! Circle that follows cursor

Hi! i’m trying to create a circle that follows the cursor maintaining a consistent distance. The issue that i’m having is that the circle gets further when i move the cursor close to the page borders and closer when i move the cursor close to the center.
This is the code i’m using on a custom code widget.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  :root {
    --gradient-color-1: #fff;
    --gradient-color-2: #222330;
    --gradient-color-3: #F2AF47;
    --gradient-color-4: #d68b1b;

  .follower {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.3s ease-in-out;
      backdrop-filter: invert(100%);
  -webkit-backdrop-filter: invert(100%);

  .follower.delayed {
    transition-delay: 50s;
<title>Interactive Gradient Background</title>

<div class="follower"></div>
    const follower = document.querySelector('.follower');
  const delayedClass = 'delayed';

  document.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    // Apply a slight delay to the follower's animation
     // Calculate an offset to make the circle closer to the cursor
    const offsetX = -450; // Adjust this value to control the offset
    const offsetY = -200; // Adjust this value to control the offset

    // Update the follower's position with the offset = mouseX + offsetX + 'px'; = mouseY + offsetY + 'px';

  document.addEventListener('mouseenter', () => {
    // Show the follower when the mouse enters the page = '1';

  document.addEventListener('mouseleave', () => {
    // Hide the follower when the mouse leaves the page = '0';

p.s. I took as inso this website :

Thank you !!

Hello Nathan!
I just found your post while looking for similar solutions myself. Thank you for sharing your code. It was helpful for me to understand a few things. Did you solve your issue?

unfortunately i am not skilled enough to help you but i was wondering if you could help me with my issue.

I currently have this: Page 4 from ‘Yasha Wallin’ by Dario Buzzini

but i would like to have a ‘screen’ effect using ``` (mix-blend-mode: screen;) on the circle hand have the circle itself being a gradiend with the idea of resulting in this effect i prototyped in figma: ‘Yasha Wallin’ from ‘Yasha Wallin’ by Dario Buzzini

Thank you in advance for your help :slight_smile: