Шторки clip-path

Фото раскрываются анимацией clip-path: слева, снизу или из центра. Подписи на карточках показывают стартовый inset.

Скрольте — галерея откроется сама.

inset(0 100% 0 0) inset(100% 0 0 0) inset(46%) inset(100% 0 0 0) inset(46%) inset(0 100% 0 0)

Код

<!-- три направления шторки из кода studiox и joby -->
<img class="rv rv-left"   src="a.jpg">  <!-- слева направо -->
<img class="rv rv-bottom" src="b.jpg">  <!-- снизу вверх -->
<img class="rv rv-center" src="c.jpg">  <!-- из центра -->

<style>
.rv-left   { clip-path: inset(0 100% 0 0 round 16px); }
.rv-bottom { clip-path: inset(100% 0 0 0 round 16px); }
.rv-center { clip-path: inset(46% round 16px); }
.rv.play {
  animation: unveil .95s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes unveil { to { clip-path: inset(0 round 16px); } }
</style>

<script>
var io = new IntersectionObserver(function (es) {
  es.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add("play"); io.unobserve(e.target); }
  });
}, { threshold: .35 });
document.querySelectorAll(".rv").forEach(function (el) { io.observe(el); });
</script>

Промпт для ИИ

Сделай появление фотографий шторкой через clip-path: изначально inset(0 100% 0 0) — откроется слева направо; варианты: inset(100% 0 0 0) — снизу вверх, inset(46%) — из центра. При попадании в кадр (IntersectionObserver threshold 0.35) анимируй к inset(0) за 0.95s по cubic-bezier(0.16,1,0.3,1) forwards, одноразово. У скруглённых фото добавляй round 16px в ОБА значения inset (начальное и конечное). В галерее давай соседним фото задержку +140ms. При prefers-reduced-motion показывай сразу.