<script setup>
import { motion, useSpring, useTransform } from "motion-v"
import { ref, onMounted, onUnmounted } from "vue"

const progress = useSpring(0)
const clipPath = useTransform(
  progress,
  [0, 1],
  ["inset(0 100% 0 0)", "inset(0 0% 0 0)"]
)

// Mock loading progress
let interval
onMounted(() => {
  interval = setInterval(() => {
    const newProgress = progress.get() + Math.random() * 0.2

    if (newProgress >= 1) {
      clearInterval(interval)
    }

    progress.set(newProgress)
  }, 500)
})

onUnmounted(() => {
  clearInterval(interval)
})
</script>

<template>
  <div class="container">
    <div class="text-container">
      <div class="text text-bg" aria-hidden>
        Loading
      </div>
      <motion.div class="text text-fill" :style="{ clipPath }">
        Loading
      </motion.div>
    </div>
  </div>
</template>

<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>