<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, transform, motionValue, press } from "https://cdn.jsdelivr.net/npm/motion@12.6.0/+esm"

    const progress = motionValue(0)

    // Create transforms for all the animated values
    const circumference = 2 * Math.PI * 120
    const strokeDashoffsetTransform = transform([0, 1], [circumference, 0])
    const circleOpacityTransform = transform([0, 1], [0, 1])
    const circleStrokeWidthTransform = transform([0, 1], [0, 20])
    const buttonScaleTransform = transform([0, 1], [1, 0.85])
    const circleColorTransform = transform([0, 1], ["#ffffff", "#8df0cc"])
    const buttonProgressXTransform = transform([0, 1], ["-200%", "0%"])

    // Get DOM elements
    const button = document.querySelector(".button")
    const buttonBackground = document.querySelector(".button-background")
    const circle = document.querySelector(".progress-ring circle")
    circle.style.strokeDasharray = circumference

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

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

    progress.on("change", update)

    function update(p) {
        circle.style.strokeDashoffset = strokeDashoffsetTransform(p)
        circle.style.opacity = circleOpacityTransform(p)
        circle.style.strokeWidth = circleStrokeWidthTransform(p)
        circle.style.stroke = circleColorTransform(p)

        // Update button properties
        button.style.transform = `scale(${buttonScaleTransform(p)})`
        buttonBackground.style.transform = `translateX(${buttonProgressXTransform(
            p
        )})`
    }

    update(0)
</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>