changing mouse cursor with javascript

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting) {
            entry.target.classList.add('show');            
        } else {
            entry.target.classList.remove('show');
        }

    });
});

const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));

const trailer = document.getElementById("trailer");

window.onmousemove = e => {
    const x = e.clientX - trailer.offsetWidth / 2;
    const y = e.clientY - trailer.offsetHeight / 2;
    const interactable = e.target.closest(".interactable");
    const interacting = interactable !== null;

    trailer.style.transform = `translate(${x}px, ${y}px)`;

    changeScale(interacting);
}

const changeScale = (interacting) => {

    const keyframes = {
        transform: `scale(${interacting ? 2 : 1})`
    }

    trailer.animate(keyframes, {
        duration: 800,
        fill: "forwards"
    });
}

/* Main */
body {
    margin: 0;
    font-family: "Roboto", sans-serif;
    color: white;
    background: rgb(20, 20, 20);
    cursor: none;
}
  
section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    padding: 100px 20vw;
    font-size: 20px;
}

#trailer {
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 20px;

    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10000;

    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
}

.interactable {
    
}

body:hover > #trailer {
    opacity: 1;
}

/* Social Media Icons */
 .wrapper {
    display: inline-flex;
}
.wrapper .icon{
    margin: 0 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 2;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
    display: block;
    height: 60px;
    width: 60px;
    background: #000;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i{
    line-height: 60px;
    font-size: 25px;
}
.wrapper .icon .tooltip{
    position: absolute;
    top: 0;
    z-index: 1;
    background: #fff;
    color: #FFF;
    padding: 10px 18px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 25px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
    top: -70px;
    opacity: 1;
    pointer-events: auto;
}
.icon .tooltip:before{
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    background: #fff;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span{
    color: #fff;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
    text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}

.wrapper .discord:hover span,
.wrapper .discord:hover .tooltip,
.wrapper .discord:hover .tooltip:before{
    background: #7289da;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
    background: #333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
    background: #DE463B;
}

/* Animation Class */
.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.changing-text {
    animation-name: fontChange;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}


/* Fonts */
.playfair-display-font {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .madimi-one-regular {
    font-family: "Madimi One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }


/* Animations etc. */
@keyframes fontChange {
    0% {
        font-family: 'Times New Roman';
    }
    10% {
        font-family: 'Courier New';
    }
    20% {
        font-family: 'Madimi One';
    }
    30% {
        font-family: 'Tahoma';
    }
    40% {
        font-family: 'Arial';
    }
    50% {
        font-family: 'Georgia';
    }
    60% {
        font-family: 'Comic Sans MS';
    }
    70% {
        font-family: 'Trebuchet MS';
    }
    80% {
        font-family: 'Playfair Display';
    }
    90% {
        font-family: 'Brush Script MT';
    }
    100% {
        font-family: 'Roboto';
    }
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Madimi+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Madimi+One&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script defer src="app.js"></script>

</head>
<body>

    <div id="trailer">

    </div>

    <section class="hidden">
        <h1 class="changing-text" style="font-size: 120px;">My Website</h1>
        <p>Look at these Animations!</p>
    </section>
    <section class="hidden">
        <h2 style="padding-bottom: 20px;">Coder &#60;/&#62;</h2>
        <img src="https://i.ibb.co/0GQCkNK/ubuntu-term.png" alt="vim" height="650" style="box-shadow: 10px 10px 5px rgb(5, 5, 5);">
    </section>
    <section class="hidden">
        <h2>New</h2>
        <p>Amet dignissimos laudantium similique pariatur provident quod repellat id laborum recusandae modi. Ullam nulla fugit officia. Ratione minus, quos natus repudiandae ducimus aspernatur harum, possimus odio magni hic tempore incidunt!</p>
    </section>
    <section class="hidden">
        <h2>New</h2>
        <p>Delectus ratione animi doloribus sunt eius, unde reiciendis provident illum deleniti consequuntur quidem necessitatibus expedita quod enim voluptas corrupti quas repellat rem autem, pariatur maiores asperiores sint voluptatibus! Illum, voluptates.</p>
    </section>
    <section class="hidden">
        <h2 style="padding-bottom: 20px;">Find me on:</h2>
        <div class="wrapper">
            <a href="https://discord.gg/KQjcgkZ3aJ" target="_blank" style="text-decoration: none; color: inherit;"><div class="icon discord interactable">
               <div class="tooltip">
                  Discord
               </div>
               <span><i class="fab fa-discord"></i></span>
            </div></a>
            <a href="https://github.com/illy-dev" target="_blank" style="text-decoration: none; color: inherit;"><div class="icon github interactable">
               <div class="tooltip">
                  Github
               </div>
               <span><i class="fab fa-github"></i></span>
            </div></a>
            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" style="text-decoration: none; color: inherit;"> <div class="icon youtube interactable">
               <div class="tooltip">
                  YouTube
               </div>
               <span><i class="fab fa-youtube"></i></span>
            </div></a>
         </div>
    </section>
</body>
</html>