Сетка плиток

Экран из тёмных плиток рассыпается со случайными задержками, открывая сцену.

«Повторить» — в углу.

Плитки разлетаются

и открывают сцену

Код

<div class="grid-intro">
  <i></i><i></i>… <!-- 6×4 = 24 плитки -->
</div>

<style>
.grid-intro { position: fixed; inset: 0; z-index: 99;
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.grid-intro i { background: #101318;
  animation: out .55s cubic-bezier(.7,0,.3,1) forwards;
  animation-delay: calc(.3s + var(--d) * 1ms); }
@keyframes out { to { transform: scale(0); opacity: 0; } }
</style>

<script>
// случайная задержка каждой плитке — «рассыпание»
document.querySelectorAll(".grid-intro i").forEach(function (t) {
  t.style.setProperty("--d", Math.floor(Math.random() * 500));
});
</script>

Промпт для ИИ

Сделай интро «сетка плиток»: фиксированный оверлей — CSS-грид 6×4 из тёмных плиток; каждой JS назначает случайную задержку --d (0-500мс); плитки схлопываются scale(0) + opacity 0 за 0.55s по cubic-bezier(0.7,0,0.3,1) начиная с 0.3s — экран «рассыпается» и открывает hero. Заголовок под ним стартует из маски на ~1s. Показывать раз за сессию (sessionStorage), pointer-events:none на оверлее.