<div class="container">
    <div class="button-wrapper">
        <button class="button">
            <div class="button-background"></div>
            Hold to confirm
        </button>

        <svg
            class="progress-ring"
            width="320"
            height="320"
            viewBox="0 0 320 320"
        >
            <circle
                cx="160"
                cy="160"
                r="120"
                fill="none"
                stroke="var(--white-feint)"
                stroke-width="24"
                stroke-linecap="round"
                stroke-dasharray="0"
            />
        </svg>
    </div>
</div>

<script>
    import { animate, motionValue, mapValue, styleEffect, press } from "https://cdn.jsdelivr.net/npm/motion@12.12.0/+esm"

    const circumference = 2 * Math.PI * 120

    /**
     * ======= Elements =======
     */
    const button = document.querySelector(".button")
    const buttonBackground = document.querySelector(".button-background")
    const circle = document.querySelector(".progress-ring circle")
    circle.style.strokeDasharray = circumference

    /**
     * ======= Motion values =======
     */
    const progress = motionValue(0)

    styleEffect(circle, {
        opacity: mapValue(progress, [0, 1], [0, 1]),
        strokeDashoffset: mapValue(progress, [0, 1], [circumference, 0]),
        strokeWidth: mapValue(progress, [0, 1], [0, 20]),
        stroke: mapValue(progress, [0, 1], ["#ffffff", "#8df0cc"]),
    })

    styleEffect(button, {
        scale: mapValue(progress, [0, 1], [1, 0.85]),
    })

    styleEffect(buttonBackground, {
        x: mapValue(progress, [0, 1], ["-200%", "0%"]),
    })

    /**
     * ======= Gestures =======
     */
    press(button, () => {
        animate(progress, [0, 1], { duration: 2, ease: "easeOut" })

        return () => animate(progress, 0, { duration: 0.3 })
    })
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: center;
        padding: 16px;
        height: 80px;
    }

    .button-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .button {
        color: #0f1115;
        background-color: #f5f5f5;
        border-radius: 999px;
        padding: 12px 20px;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border: none;
        cursor: pointer;
        will-change: transform;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    .button-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--green);
        border-radius: 999px;
        z-index: -1;
        filter: blur(20px);
        transform: scale(2);
        will-change: transform;
    }

    .progress-ring circle {
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: center;
        will-change: opacity;
    }
</style>