Image Wipe Reveal

<!-- Image revealed by a clip-path wipe as it enters view -->
<div class="nuda-scrollwipe__panel">
  <img class="nuda-scrollwipe__img" src="photo.jpg" alt="Reveal" />
</div>

/* Image Wipe Reveal
   A clip-path inset() wipes the image open as it scrolls into view,
   driven by a view() timeline. clip-path only (GPU compositable). */

.nuda-scrollwipe__panel { height: 96px; }

.nuda-scrollwipe__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 100% 0 0);
  animation: nuda-scrollwipe-in linear both;
  animation-timeline: view(block);
  animation-range: entry 5% cover 45%;
}

@keyframes nuda-scrollwipe-in {
  to { clip-path: inset(0 0 0 0); }
}

@supports not (animation-timeline: view()) {
  .nuda-scrollwipe__img { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scrollwipe__img {
    animation: none;
    animation-timeline: none;
    clip-path: inset(0 0 0 0);
  }
}