JavaScript Mouse Effect04

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

        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="img/img04.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>Rome is not built in a day.</p>
                    <p>로마는 하루아침에 만들어지는 것이 아니다.</p>        
                </figcaption>
            </div>
        </div>
    </section>
</main>

.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.mouse__img {
    position: relative;
    cursor: none;
}
.mouse__img figure {
    width: 50vw;
    height: 59vh;
    overflow: hidden;
    /* background-color: #ccc; */
    /* border: 3px solid #fff;  */
    transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
    position: relative;
}
.mouse__img figure:hover {
    transform: scale(1.025);
}
.mouse__img figure img {
    position: absolute;
    left: -5%; top: -5%;
    width: 110%;
    height: 110%;
    /* opacity: 0.4; */
    object-fit: cover;
}
.mouse__img figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.3vw;
    line-height: 1.6;
    white-space: nowrap;
}
.cursor {
    position: absolute;
    left: -30px; top: -30px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
}
.cursor ul {
    position: absolute;
    left: 40px; top: 0;
}
.cursor ul {
    white-space: nowrap;
}

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값

    document.querySelector(".mouse__img").addEventListener("mousemove", (e) => {
        
        gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2})
        
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;
        let centerPageX = window.innerWidth / 2 - mousePageX
        let centerPageY = window.innerHeight / 2 - mousePageY

        
        const imgMove = document.querySelector(".mouse__img figure img");
        imgMove.style.transform = "translate("+centerPageX/20+"px, "+centerPageY/20+"px)";
        
        document.querySelector(".mousePageX").textContent = mousePageX;
        document.querySelector(".mousePageY").textContent = mousePageY;
        document.querySelector(".centerPageX").textContent = centerPageX;
        document.querySelector(".centerPageY").textContent = centerPageY;
    })