<div class="container">
    <h1 class="h1">Move your pointer over the text to scatter.</h1>
</div>

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

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

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

        document.addEventListener("pointermove", (event) => {
            const now = performance.now()
            const timeSinceLastEvent = (now - prevEvent) / 1000 // seconds
            prevEvent = now
            pointerVelocity.x = event.movementX / timeSinceLastEvent
            pointerVelocity.y = event.movementY / timeSinceLastEvent
        })

        hover(chars, (element) => {
            /**
             * Calculate the speed of the pointer movement
             * and use that to calculate the distance the character should move
             */
            const speed = Math.sqrt(
                pointerVelocity.x * pointerVelocity.x +
                    pointerVelocity.y * pointerVelocity.y
            )
            const angle = Math.atan2(pointerVelocity.y, pointerVelocity.x)
            const distance = speed * 0.1

            animate(
                element,
                {
                    x: Math.cos(angle) * distance,
                    y: Math.sin(angle) * distance,
                },
                { type: "spring", stiffness: 100, damping: 50 }
            )
        })
    }

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

<style>
    body {
        overflow: hidden;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 420px;
        text-align: left;
        color: #0f1115;
    }

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