Stagger in random order

<ul class="example" aria-label="Squares staggered in a random order">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<script type="module">
    import { animate, stagger } from "motion"

    animate(
        ".example li",
        { opacity: 1, scale: [0, 1] },
        {
            type: "spring",
            bounce: 0.4,
            delay: stagger(0.05, { from: "random" }),
        }
    )
</script>

<style>
    ul.example {
        display: grid;
        grid-template-columns: repeat(6, 40px);
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.example li {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: var(--hue-5);
        opacity: 0;
    }
</style>