<div class="container">
    <div class="text-container">
        <div class="text text-bg" aria-hidden>Loading</div>
        <div class="text text-fill">Loading</div>
    </div>
</div>

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

    const textFill = document.querySelector(".text-fill")

    let progress = 0
    const mapProgressToClipPath = transform(
        [0, 1],
        ["inset(0 100% 0 0)", "inset(0 0% 0 0)"]
    )

    const interval = setInterval(() => {
        progress = progress + Math.random() * 0.2

        animate(
            textFill,
            { clipPath: mapProgressToClipPath(progress) },
            { type: "spring", stiffness: 100, damping: 10 }
        )

        if (progress >= 1) {
            clearInterval(interval)
        }
    }, 500)
</script>

<style>
    @import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap");

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .text-container {
        position: relative;
        font-size: 32px;
        font-weight: bold;
    }

    .text {
        position: relative;
        color: #ff0088;
        font-family: "Unbounded", sans-serif;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
        text-transform: uppercase;
        font-size: 64px;
        letter-spacing: -0.06em;
    }

    .text-bg {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.2;
    }

    .text-fill {
        position: relative;
        clip-path: inset(0 100% 0 0);
        will-change: clip-path;
        z-index: 1;
    }
</style>