Мозаика-пикселизация

Фото проявляется сквозь гаснущие плитки со случайным порядком и «цифровыми» steps.

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

Код

<div class="pixelate">
  <img src="photo.jpg">
  <div class="tiles"></div>
</div>

<style>
.pixelate { position: relative; overflow: hidden; }
.tiles { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 1fr); }
.tiles i { background: #fff; }          /* цвет фона страницы */
.pixelate.play .tiles i {
  animation: out .4s steps(2) forwards; /* steps = «цифровой» характер */
  animation-delay: calc(var(--d) * 1ms); }
@keyframes out { to { opacity: 0; } }
</style>

<script>
var box = document.querySelector(".tiles");
for (var i = 0; i < 84; i++) {
  var t = document.createElement("i");
  t.style.setProperty("--d", Math.floor(Math.random() * 900)); // случайный порядок
  box.appendChild(t);
}
// .play — по IntersectionObserver
</script>

Промпт для ИИ

Сделай мозаичное проявление фото (pixelate reveal): поверх картинки грид 12×7 плиток цвета фона страницы; каждой JS даёт случайную задержку --d (0-900мс); при появлении в кадре плитки гаснут opacity→0 за 0.4s со steps(2) — фото проявляется «цифровой» мозаикой. Тот же приём наоборот (плитки появляются) — переход на следующий экран.