Фото из полос

Кадр сшивается из вертикальных полос, съезжающихся сверху и снизу.

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

Код

<div class="slices">
  <i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i>
  <i style="--i:3"></i><i style="--i:4"></i>
</div>

<style>
.slices { display: flex; aspect-ratio: 16/9; overflow: hidden; }
.slices i { flex: 1; opacity: 0;
  background-image: url(photo.jpg);
  background-size: 500% 100%;                    /* 5 полос = 500% */
  background-position: calc(var(--i) * 25%) 50%; /* своя часть фото */
}
.slices i:nth-child(odd)  { transform: translateY(105%); }
.slices i:nth-child(even) { transform: translateY(-105%); }
.slices.play i {
  animation: in .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 70ms); }
@keyframes in { to { transform: none; opacity: 1; } }
</style>

Промпт для ИИ

Сделай сборку фото из вертикальных полос: flex-контейнер с N полосами (flex:1), у каждой то же фото с background-size N*100% 100% и background-position calc(i * 100/(N-1))% — каждая полоса показывает свою часть кадра. Нечётные стартуют сдвинутыми вниз (translateY 105%), чётные — вверх; при появлении съезжаются к нулю за 0.8s cubic-bezier(0.16,1,0.3,1) с каскадом 70мс — фото «сшивается» из жалюзи.