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

<script type="module">
    import { animate, frame, springValue, styleEffect } from "https://cdn.jsdelivr.net/npm/motion@12.23.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 x = springValue(0)
    const y = springValue(0)

    styleEffect(ball, { x, y })

    document.addEventListener("pointermove", (e) => {
        x.set(e.clientX - initialX)
        y.set(e.clientY - initialY)
    })
</script>

<style>
    body {
        overflow: hidden;
    }

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