---
import Heading from "@/components/Heading.astro";
---

<div id="introduction-content-container" class="flex flex-col gap-4">
    <Heading>
        The Next Generation Motion Design Tool - Free & Open Source
    </Heading>
    <p>
        We believe tools for expressing yourself should be accessible to
        everybody. Not constrained to proprietary operating systems or monthly
        subscriptions. You should own the tools you work with.
    </p>
    <p>
        tempblade Creator aims to become a viable alternative to current motion
        design tools, and even exceed them in certain aspects like
        extensibility. This is only possible due to our open source approach.
        Currently we are in an early alpha stage, and the program as it is right
        now has to be seen as a proof of concept rather then a finished product.
    </p>
    <p>
        You're a developer, like our idea and want to help? Join our discord or
        check out the repository!
        <a href="https://discord.gg/map44Dt6sK">Our Discord</a>
    </p>
    <p>
        You're not a developer but still want to support the work? I've got a
        patreon!
    </p>
</div>

<script>
    import { ease } from "@unom/style";
    import { animate, inView, stagger } from "motion";

    const contentContainer = document.getElementById(
        "introduction-content-container"
    );

    const children = document.querySelectorAll(
        "#introduction-content-container *"
    );

    if (contentContainer) {
        inView(contentContainer, () => {
            animate(
                children,
                { y: [20, 0], opacity: [0, 1] },
                { ...ease.quint(0.8).out, delay: stagger(0.1) }
            );
        });
    }
</script>
