<div class="container">
    <div class="gradient-box"></div>
</div>

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

    const container = document.querySelector(".container")
    const gradientBox = document.querySelector(".gradient-box")

    // State
    const gradientX = motionValue(50)
    const gradientY = motionValue(50)
    let boxRect = { width: 0, height: 0, top: 0, left: 0 }

    /**
     * Apply the latest gradient values to the box
     */
    function renderGradient() {
        gradientBox.style.background = `conic-gradient(from 0deg at calc(${gradientX.get()}% - ${
            boxRect.left
        }px) calc(${gradientY.get()}% - ${
            boxRect.top
        }px), #0cdcf7, #ff0088, #fff312, #0cdcf7)`
    }

    function scheduleRender() {
        frame.render(renderGradient)
    }

    /**
     * Measure the box's dimensions and set up an event listener
     * to update it on resize.
     */
    function measure() {
        boxRect = gradientBox.getBoundingClientRect()
    }

    measure()
    window.addEventListener("resize", () => frame.read(measure))
    gradientX.on("change", scheduleRender)
    gradientY.on("change", scheduleRender)
    scheduleRender()

    /**
     * Track pointer position and use this to update the gradient.
     */
    container.addEventListener("pointermove", (e) => {
        gradientX.set((e.clientX / boxRect.width) * 100)
        gradientY.set((e.clientY / boxRect.height) * 100)
    })
</script>

<style>
    .container {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gradient-box {
        width: 400px;
        height: 400px;
        border-radius: 50px;
        cursor: none;
    }
</style>