<div class="container">
    <div class="swatch-container">
        <div class="swatch waapi"></div>
        <div class="label">Browser</div>
    </div>
    <div class="swatch-container">
        <div class="swatch motion"></div>
        <div class="label">Motion</div>
    </div>
</div>

<script type="module">
    import { animate } from "https://cdn.jsdelivr.net/npm/motion@12.6.0/+esm"

    // Motion animation
    animate(
        ".motion",
        {
            backgroundColor: ["#ff0088", "#0d63f8"],
        },
        {
            duration: 2,
            repeat: Infinity,
            repeatType: "reverse",
            easing: "linear",
        }
    )

    // Web Animations API animation
    document
        .querySelector(".waapi")
        .animate(
            [
                { backgroundColor: "#ff0088" },
                { backgroundColor: "#0d63f8" },
            ],
            {
                duration: 2000,
                iterations: Infinity,
                direction: "alternate",
                easing: "linear",
            }
        )
</script>

<style>
    .container {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

    .swatch-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .swatch {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        background-color: #ff0088;
    }

    .label {
        color: #f5f5f5;
        font-size: 14px;
    }
</style>