<script setup lang="ts">
import { animate, stagger } from "motion"
import { splitText } from "motion-plus"
import { ref, onMounted } from "vue"

const containerRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
    document.fonts.ready.then(() => {
        if (!containerRef.value) return

        // Hide the container until the fonts are loaded
        containerRef.value.style.visibility = "visible"

        const { words } = splitText(
            containerRef.value.querySelector("h1")!
        )

        // Animate the words in the h1
        animate(
            words,
            { opacity: [0, 1], y: [10, 0] },
            {
                type: "spring",
                duration: 2,
                bounce: 0,
                delay: stagger(0.05),
            }
        )
    })
})
</script>

<template>
    <div class="container" ref="containerRef">
        <h1 class="h1">
            Level up your animations with the all-in membership
        </h1>
    </div>
</template>

<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 420px;
    text-align: left;
    visibility: hidden;
}

.split-word {
    will-change: transform, opacity;
}
</style>