Javascript Mouse Effect05

.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: none;
}
.mouse__img {
    position: relative;
    text-align: center;
    /* perspective: 600px; */
    transform: rotateX(0deg) rotateY(0deg) perspective(600px);
    transform-style: preserve-3d;
    will-change: transform;
    transition: all 0.4s;
}
.mouse__img figure {
    width: 50vw;
    position: relative;
}
.mouse__img figure::before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: -40px;
    width: 90%;
    height: 40px;
    background: url(img/img13.jpg) center center no-repeat;
    background-size: 100% 40px;
    filter: blur(10px) grayscale(50%);
    opacity: 0.9;
    z-index: -1;
}
.mouse__img figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 1vw;
    white-space: nowrap;
    line-height: 1.6;
    background: rgba(0,0,0,0.4);
    padding: 1vw 2vw;
    transform: translate3d(-50%, -50%, 150px);
}
.cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
    mix-blend-mode: difference;
}

const circle = document.querySelector(".cursor").getBoundingClientRect();

function mouseMove(e){
    //마우스 좌표 값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;

    //마우스 좌표 기준점을 가운데로 변경
    let centerPageX = window.innerWidth/2 - mousePageX;
    let centerPageY = window.innerHeight/2 - mousePageY;

    //최소값을 -100 최대값을 100 설정
    let maxPageX = Math.max(-100, Math.min(100, centerPageX));
    let maxPageY = Math.max(-100, Math.min(100, centerPageY));

    //각도 줄이는 설정
    let anlexPageX = maxPageX * 0.3;
    let anlexPageY = maxPageY * 0.1;

    //부드럽게 설정 10-->30
    let softPageX = 0;
    let softPageY = 0;
    softPageX += anlexPageX * 0.4;
    softPageY += anlexPageY * 0.4;

    //이미지 움직이기
    const imgNove = document.querySelector(".mouse__img")
    imgNove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+-softPageX+"deg)";

    //원크기
    let circleWidth = mousePageX -circle.width/2;
    let circleHeight = mousePageY -circle.height/2;

    // 커서
    gsap.to(".cursor", {duration: 0.3, left: circleWidth, top: circleHeight})

    //출력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
    document.querySelector(".maxPageX").textContent = maxPageX;
    document.querySelector(".maxPageY").textContent = maxPageY;
    document.querySelector(".anlexPageX").textContent = anlexPageX;
    document.querySelector(".anlexPageY").textContent = anlexPageY;
    document.querySelector(".softPageX").textContent = softPageX;
    document.querySelector(".softPageY").textContent = softPageY;


}
document.addEventListener("mousemove", mouseMove);