JavaScript Mouse Effect02

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

        <div class="mouse__wrap">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
            <p><span>Judgement</span>, not passion should prevail.</p>
            <p><span>이성</span>이 열정보다 앞서야 한다.</p>
        </div>
    </section>
</main>

.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 goldenrod;
    color: goldenrod;
}
.cursor {
    position: absolute;
    left: 0; top: 0;
    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;
    left: 0; top: 0;
    width: 30px;
    height: 30px;
    z-index: 9999;
    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(0);
}
.cursor-follower.active {
    transform: scale(10);
    background: rgba(255,166,0,0.6);
}

.cursor.show {
    transform: scale(5);
}
.cursor-follower.show {
    transform: scale(10) rotateX(360deg);
    background: rgba(217, 255, 0, 0.6);
}
.cursor.show1 {
    transform: scale(3);
}
.cursor-follower.show1 {
    transform: scale(5) rotateY(360deg);
    background: rgba(0, 255, 255, 0.6);
}
.cursor.show2 {
    transform: scale(3);
}
.cursor-follower.show2 {
    transform: scale(15);
    background: rgba(9, 255, 0, 0.6);
} 

const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");

window.addEventListener("mousemove", e => {
    gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
    gsap.to(follower, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

    document.querySelectorAll(".mouse__wrap span").forEach(e => {
        e.addEventListener("mouseover", ()=>{
            cursor.classList.add("active")
            follower.classList.add("active")
        })
        e.addEventListener("mouseout", ()=>{
            cursor.classList.remove("active")
            follower.classList.remove("active")
        })
    })
    document.querySelector(".info .title").addEventListener("mouseover", ()=>{
        cursor.classList.add("show")
        follower.classList.add("show")
    })
    document.querySelector(".info .title").addEventListener("mouseout", ()=>{
        cursor.classList.remove("show")
        follower.classList.remove("show")
    })
    document.querySelector(".info .number").addEventListener("mouseover", ()=>{
        cursor.classList.add("show1")
        follower.classList.add("show1")
    })
    document.querySelector(".info .number").addEventListener("mouseout", ()=>{
        cursor.classList.remove("show1")
        follower.classList.remove("show1")
    })
    document.querySelector(".info .source-btn").addEventListener("mouseover", ()=>{
        cursor.classList.add("show2")
        follower.classList.add("show2")
    })
    document.querySelector(".info .source-btn").addEventListener("mouseout", ()=>{
        cursor.classList.remove("show2")
        follower.classList.remove("show2")
    })

    document.querySelector(".pageX").innerText = e.pageX
    document.querySelector(".pageY").innerText = e.pageY
})