Hero Clip Wipe Gallery — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: hero-clip-wipe-gallery
import gsap from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const targets = document.querySelectorAll('.clip-wipe-item');
if (reduce) {
  gsap.set(targets, { clipPath: 'inset(0 0 0 0)', autoAlpha: 1 });
} else {
  gsap.fromTo(targets,
    { clipPath: 'inset(0 100% 0 0)', autoAlpha: 1 },
    { clipPath: 'inset(0 0% 0 0)', duration: 1.2, ease: 'expo.out', stagger: 0.18 }
  );
}

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: hero-clip-wipe-gallery -->
<section class="hg-stage">
  <div class="hg-bg clip-wipe-item"><!-- canvas-painted gradient --></div>
  <div class="hg-grid">
    <p class="hg-kicker"><i>Issue №24 — Spring Editorial</i></p>
    <h1 class="hg-title clip-wipe-item">A quiet light, a held breath.</h1>
    <figcaption class="hg-cap clip-wipe-item">
      <span>Photographed by Atelier Norden</span>
      <span>Mette Holm — Linen, Stone, Hour</span>
    </figcaption>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-clip-wipe-gallery */
.hg-stage{position:relative;color:#F4F1EB;font-family:'Fraunces',Georgia,serif;min-height:88vh}
.hg-bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 20%, #C89A6B 0%, #6B4A30 45%, #1a120a 100%)}
.hg-title{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(3rem,8vw,7.5rem);line-height:1.02}
.hg-kicker{font-style:italic;letter-spacing:.04em}
.hg-cap{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}