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

<script type="module">
    const { animate, stagger } = window.Motion
    const { splitText } = window.MotionPlus

    function animateText() {
        /**
         * Only show the container after the fonts are loaded.
         * This is to prevent the text from flashing with the wrong font
         * but also to ensure we only reveal the text once it's ready
         * to be animated.
         */
        const container = document.querySelector(".container")
        container.style.visibility = "visible"

        /**
         * Animate the words in the h1. By changing words to chars or lines
         * we can animate different parts of the text.
         */
        animate(
            splitText(".h1").words,
            {
                opacity: [0, 1],
                y: [10, 0],
            },
            {
                type: "spring",
                duration: 2,
                bounce: 0,
                delay: stagger(0.05),
            }
        )
    }

    document.fonts.ready.then(animateText)
</script>

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