Javascript Mouse Effect02

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

        <div class="mouse__wrap">
            <p>No man is wise enough by <span>himself</span>.</p>
            <p>그 누구도 <span>혼자</span>서는 지혜로울 수 없다.</p>              
        </div>
    </section>
</main>

body::before {
    background: rgba(75, 4, 16, 0.589);
}
.info,
.info a {
    cursor: none;
}
.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 orange;
    color: orange;
}
.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.5s, opacity 0.2s;
}
.cursor.active {
    transform: scale(0);
}
.cursor-follower.active {
    transform: scale(10);
    background: rgba(255,166,0,.6);
} 
.cursor.show {
    transform: scale(1);
    background: rgba(0, 162, 255, 0.9);
    
}
.cursor-follower.show {
    transform: scale(3) rotate(45deg);
    background: rgba(0,162,255,.6);
    border-radius: 10px;
    border: 1px solid rgb(2, 125, 196);
} 

const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");
const span = document.querySelectorAll(".mouse__wrap span");
const info = document.querySelectorAll(".info");

window.addEventListener("mousemove", e => {
    //커서 좌표값 할당
    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});

    //오버효과
    //mouseover,mouseenter / mouseout,mouseleave / 이벤트 버블링
    span.forEach(span => {
        span.addEventListener("mouseenter", span => {
            cursor.classList.add("active");
            follower.classList.add("active");
        });
        span.addEventListener("mouseleave", span => {
            cursor.classList.remove("active");
            follower.classList.remove("active");
        });
    });

    info.forEach(span => {
        span.addEventListener("mouseenter", span => {
            cursor.classList.add("show");
            follower.classList.add("show");
        });
        span.addEventListener("mouseleave", span => {
            cursor.classList.remove("show");
            follower.classList.remove("show");
        });
    });
    
    //출력
    document.querySelector(".pageX").innerText = e.pageX;
    document.querySelector(".pageY").innerText = e.pageY;
});