Help! Circle that follows cursor

Custom code
1

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.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :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;
  }
</style>
<title>Interactive Gradient Background</title>
</head>

<div class="follower"></div>
<script>
    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
    follower.classList.add(delayedClass);
    
     // 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
    follower.style.left = mouseX + offsetX + 'px';
    follower.style.top = mouseY + offsetY + 'px';
  });

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

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

p.s. I took as inso this website : https://illuminating-radioactivity.com/

Thank you !!

2

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:

3

Please! has anyone resolved this, it’s so frustrating!?

4

have you tried to check the “use iframe” option at the bottom of the custom code widget?

5

Yes, at the end i had to recode it completely. Here’s the final code: `
body {
//cursor: none;
min-height: 100%;
background: rgb(255, 255, 255);
}

#myCustomCursor {
position: fixed;
width: 30px;
height: 30px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(–y, 0);
left: var(–x, 0);
transform: translate(-50%, -50%);
mix-blend-mode: difference;
pointer-events: none;
//transition-duration: 300ms;
//transition-timing-function: ease-out;
z-index: 99999;
}

#myCustomCursor.myCursorHoverState {
width: 160px;
height: 160px;
background: blue;
}

Hope it helped!

1 Like
6

Hi Benjamin, finally I’ve solved this issue!! Here’s the final code:
body {
//cursor: none;
min-height: 100%;
background: rgb(255, 255, 255);
}

#myCustomCursor {
position: fixed;
width: 30px;
height: 30px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(–y, 0);
left: var(–x, 0);
transform: translate(-50%, -50%);
mix-blend-mode: difference;
pointer-events: none;
//transition-duration: 300ms;
//transition-timing-function: ease-out;
z-index: 99999;
}

#myCustomCursor.myCursorHoverState {
width: 160px;
height: 160px;
background: blue;
}

1 Like
7

mine works fine

1
11920×2153 179 KB

2
21789×845 118 KB

8

Hi, I have the same problem but I can’t figure out how to solve it. I’m trying to make a custom cursor that follows the cursor and when it hovers over the buttons it increases its size. The problem is as if the cursor originates from the top left vertex and the more I move it to the right or down, the further it moves away. I saw your answers and your advice but I really can’t solve it, please help me I’m going crazy trying to figure out how to solve it!!!

This is my code inside the widget code:

<div class="cursor"></div>

<script>
  const cursor = document.querySelector('.cursor');
  const elementi = document.querySelectorAll('[class="rmwidget widget-button"]');

  document.addEventListener('mousemove', function(e) {
    let x = e.clientX;
    let y = e.clientY;
    cursor.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
  });

  elementi.forEach(elemento => {
    elemento.addEventListener('mouseover', function() {
      cursor.style.height = '200px';
      cursor.style.width = '200px';
    });

    elemento.addEventListener('mouseout', function() {
      cursor.style.height = '50px';
      cursor.style.width = '50px';
    });
  });
</script>

<style>
  .cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #fff;
    position: fixed;
    top: var(–y, 0);
    left: var(–x, 0);
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 99999;
  }
</style>
1 Like
9

Hi there, thanks for sharing! But to create a circle cursor, is the only way out be to code a shape widget? Nothing simpler?