# Circle follow Mouse

**URL:** <https://forum.readymag.com/t/circle-follow-mouse/1960>\
**Category:** Custom code\
**Created:** [September 15, 2023, 12:45pm UTC](https://forum.readymag.com/t/circle-follow-mouse/1960 "2023-09-15T12:45:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dario\_Buzzini](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dario_buzzini/32/716_2.png) [@Dario\_Buzzini](https://forum.readymag.com/u/Dario_Buzzini)\
**Post date:** [September 15, 2023, 12:45pm UTC](https://forum.readymag.com/t/circle-follow-mouse/1960/1 "2023-09-15T12:45:15Z")

</div>

Hello! reposting here a reply on a [thread that might have gone silent](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908)

I currently have this: [Page 4 from ‘Yasha Wallin’ by Dario Buzzini](https://readymag.com/dariobuzzini/YW/4/)

```auto
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

  .follower {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.3s ease-in-out;
    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>

```

but i would like to have a ‘screen’ effect using ``` (mix-blend-mode: screen;) on the circle and 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](https://readymag.com/dariobuzzini/YW/proto/)

Can anybody help 🙂

Thanks!
