<div class="container">
    <h1 class="h1">That&rsquo;s <span class="wavy">waaaavy</span>.</h1>
</div>

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

    const pointerVelocity = { x: 0, y: 0 }
    let prevEvent = 0

    function animateText() {
        const { chars } = splitText(".wavy")

        const container = document.querySelector(".container")
        container.style.visibility = "visible"

        const staggerDelay = 0.15

        animate(
            chars,
            { y: [-20, 20] },
            {
                repeat: Infinity,
                repeatType: "mirror",
                ease: "easeInOut",
                duration: 2,
                delay: stagger(
                    staggerDelay,
                    /**
                     * By setting this as a negative delay we can start
                     * the animation part-way through, to ensure we don't
                     * get an initial iteration where the characters look
                     * like they're starting to animate one by one.
                     */
                    { startDelay: -staggerDelay * chars.length }
                ),
            }
        )
    }

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

<style>
    body {
        overflow: hidden;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        visibility: hidden;
    }

    .split-char {
        will-change: transform, opacity;
    }
</style>
That’s waaaavy.
