Anime Stagger Grid Hover

<div class="asgh-grid" id="asgh-grid"></div>

.asgh-grid {
  display: grid;
  grid-template-columns: repeat(10, 24px);
  grid-template-rows: repeat(6, 24px);
  gap: 4px;
  cursor: pointer;
}
.asgh-cell {
  background: #334155;
  border-radius: 4px;
  transition: background 0.1s;
}

const grid = document.getElementById('asgh-grid');
for (let i = 0; i < 60; i++) {
  const cell = document.createElement('div');
  cell.classList.add('asgh-cell');
  grid.appendChild(cell);
}
grid.addEventListener('mouseenter', function() {
  anime({
    targets: '.asgh-cell',
    backgroundColor: ['#334155', '#6366f1', '#334155'],
    delay: anime.stagger(40, { grid: [10, 6], from: 'center' }),
    duration: 800,
    easing: 'easeInOutQuad'
  });
});