Circle follow Mouse

Hello! reposting here a reply on a thread that might have gone silent

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

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

  .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;
<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';

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

Can anybody help :slight_smile: