<div class="grid-container">
    <div class="grid">
        <!-- Dynamically generate cells -->
    </div>
</div>

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

    const baseDelay = 0.0015

    // Create grid cells
    const grid = document.querySelector(".grid")
    const gridSize = 10
    const totalCells = gridSize * gridSize

    for (let i = 0; i < totalCells; i++) {
        const cell = document.createElement("div")
        cell.className = "cell"
        grid.appendChild(cell)
    }

    const cells = document.querySelectorAll(".cell")

    const originIndex = Math.floor(Math.random() * totalCells)
    const originCell = cells[originIndex]

    originCell.classList.add("origin")

    const originPoint = getCenter(originCell)
    const delays = []

    for (let i = 0; i < totalCells; i++) {
        const cell = cells[i]
        const cellPoint = getCenter(cell)
        const distance = Math.sqrt(
            (cellPoint.x - originPoint.x) ** 2 +
                (cellPoint.y - originPoint.y) ** 2
        )
        const delay = distance * baseDelay
        delays.push(delay)
    }

    animate(
        cells,
        {
            opacity: [0, 1],
            scale: [0.5, 1],
        },
        {
            type: "spring",
            stiffness: 600,
            damping: 20,
            delay: (i) => (i === originIndex ? 0 : delays[i]),
        }
    )

    /**
     * ==============   Utils   ================
     */
    function getCenter(element) {
        const { x, y, width, height } = element.getBoundingClientRect()
        return { x: x + width / 2, y: y + height / 2 }
    }
</script>

<style>
    .grid-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 10px;
        width: 400px;
        height: 400px;
    }

    .cell {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .origin {
        background-color: #ff0088;
    }
</style>