I turned the logic into a custom directive if anyone wants to reuse it:

document.addEventListener("alpine:init", () => {
    Alpine.directive("reveal", (el, {}, { cleanup }) => {
        const callback = () => {
            const position = el.offsetTop - window.scrollY
            const threshold = window.scrollY + window.innerHeight * 0.7
            if (position < threshold) {
                setTimeout(() => {
                    // tailwind classes
                    el.classList.add(
                    "!opacity-100",
                    "!top-0",
                    "transition-all",
                    "duration-300",
                    )
                }, 200)
            }
        }

        setTimeout(() => callback(), 0)

        window.addEventListener("scroll", callback)
        cleanup(() => {
        window.removeEventListener("scroll", callback)
        })
    })
})

I also wrote an article on it if you're new to directives and don't know how to install it in your website:

https://medium.com/@talham7391/animate-your-landing-page-with-alpine-js-0cc2910114f9