JavaScript mouse Effect02

<main>
    <section id="mouseType02">
        <div class="cursor"></div>
        <div class="cursor-follower"></div>

        <div class="mouse__wrap">
            <p>You will <span>never</span> know until you <span>try</span>.</p>
            <p><span>시도</span>해보지 않고는 <span>결코</span> 알지 못한다.</p>
        </div>
    </section>
</main>

body::before {                      
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(46, 85, 107, 0.7);
    z-index: -1;
    }
    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }
    .mouse__wrap p {
        font-size: 2.5vw;
        line-height: 2;
        font-weight: 300;
    }
    .mouse__wrap p:last-child {
        font-size: 3vw;
        font-weight: 400;
    }
    .mouse__wrap p span {
        border-bottom: 0.15vw dashed tomato;
        color: tomato;
    }
    .cursor {               /* 마우스를 따라다니는 원 */
        position: absolute;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 10px;
        z-index: 9999;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    .cursor-follower {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: 0;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    .cursor.active {
        transform: scale(10);
    }
    .cursor-follower.active {
        transform: scale(3);
        background: rgba(255, 94, 0, 0.6);
    }
    .cursor.show1 {
        transform: scale(5);
        background-color: skyblue;
        opacity: 0.5;
    }
    .cursor-follower.show1 {
        transform: scale(5);
        background-color: rgb(68, 0, 255);
    }
    .cursor.show2 {
        transform: scale(2);
        background-color: blue;
        opacity: 0.5;
    }
    .cursor-follower.show2 {
        transform: scale(1);
        background-color: rgb(128, 96, 216);
        opacity: 0.3;
    }
    .cursor.show3 {
        transform: scale(5);
        background-color: rgb(30, 102, 131);
        opacity: 0.5;
    }
    .cursor-follower.show3 {
        transform: scale(5);
        background-color: rgb(54, 29, 126);
    }
    .cursor.show4 {
        transform: scale(5) rotate(45deg);
        background-color: skyblue;
        opacity: 0.5;
        border-radius: 10px;
    }
    .cursor-follower.show4 {
        transform: scale(5) rotate(135deg);
        background-color: rgb(68, 0, 255);
        border-radius: 10px;
    }
    .cursor.show5 {
        transform: scale(2);
        background-color: rgb(235, 135, 235);
        opacity: 0.5;
    }
    .cursor-follower.show5 {
        transform: scale(2);
        background-color: rgb(255, 230, 0);
    }

<script>
    const cursor = document.querySelector(".cursor");
    const follower = document.querySelector(".cursor-follower");
    
    window.addEventListener("mousemove", e => {
        //커서 좌표값 할당
        // cursor.style.left = e.pageX -5 + "px";
        // cursor.style.top = e.pageY -5 + "px";
        // follower.style.left = e.pageX -15 + "px";
        // follower.style.top = e.pageY -15 + "px";

        gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY - 5})
        gsap.to(follower, {duration: .8, left: e.pageX -15, top: e.pageY - 15})

        //오버효과
        document.querySelectorAll(".mouse__wrap span").forEach(span => {
            span.addEventListener("mouseover", () => {
                cursor.classList.add("active");
                follower.classList.add("active");
            })
            span.addEventListener("mouseleave", () => {
                cursor.classList.remove("active")
                follower.classList.remove("active")
            })
        })
        document.querySelector("h1 a").addEventListener("mouseenter", () => {
            cursor.classList.add("show1")
            follower.classList.add("show1")
        })
        document.querySelector("h1 a").addEventListener("mouseleave", () => {
            cursor.classList.remove("show1")
            follower.classList.remove("show1")
        })

        document.querySelectorAll("li a").forEach((el,i) => {
            el.addEventListener("mouseover", () => {
                cursor.classList.add("show" + (i+1))
                follower.classList.add("show" + (i+1))
            })
            el.addEventListener("mouseout", () => {
                cursor.classList.remove("show"+ (i+1))
                follower.classList.remove("show" + (i+1))
            })
        })

        //출력
        document.querySelector(".pageX").innerText = e.pageX;
        document.querySelector(".pageY").innerText = e.pageY;
    });
</script>