<div class="ball"></div>

<script type="module">
    import { animate, frame, motionValue } from "https://cdn.jsdelivr.net/npm/motion@12.6.0/+esm"

    const ball = document.querySelector(".ball")

    const { top, left, width, height } = ball.getBoundingClientRect()
    const initialX = left + width / 2
    const initialY = top + height / 2

    const pointerX = motionValue(0)
    const pointerY = motionValue(0)

    function springToPointer() {
        animate(
            ball,
            {
                x: pointerX.get() - initialX,
                y: pointerY.get() - initialY,
            },
            { type: "spring", stiffness: 100, damping: 10 }
        )
    }

    function scheduleSpringToPointer() {
        /**
         * By using `frame.postRender`, we achieve two things:
         * 1. The animation will be triggered at the end of the animation loop, giving
         *    any existing spring animations a chance to run for a frame and render.
         * 2. Debounce the animation to prevent a new one being triggered every pointer
         *    move, which could be more regular than the animation loop.
         */
        frame.postRender(springToPointer)
    }

    pointerX.on("change", scheduleSpringToPointer)
    pointerY.on("change", scheduleSpringToPointer)

    document.addEventListener("pointermove", (e) => {
        pointerX.set(e.clientX)
        pointerY.set(e.clientY)
    })
</script>

<style>
    .ball {
        width: 100px;
        height: 100px;
        background-color: #ff0088;
        border-radius: 50%;
    }
</style>