Hero Clip Wipe Kinetic — Motion Lab

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

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

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

<!-- Skeleton: hero-clip-wipe-kinetic -->
<section class="hk-stage">
  <span class="hk-tag">// LOUD / 02</span>
  <h1 class="hk-title">
    <span class="clip-wipe-item">SHIP</span>
    <span class="clip-wipe-item hk-acid">FAST</span>
    <span class="clip-wipe-item">LOUD</span>
  </h1>
  <div class="hk-rail clip-wipe-item">
    <span>NO RADIUS</span><span>NO MERCY</span>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-clip-wipe-kinetic */
.hk-stage{background:#0A0A0A;color:#fff;font-family:'Archivo Black','Archivo',sans-serif}
.hk-tag{font-family:'JetBrains Mono',monospace;color:#FFE600;letter-spacing:.2em;text-transform:uppercase}
.hk-title{font-size:clamp(4rem,16vw,16rem);line-height:.85;text-transform:uppercase;letter-spacing:-.04em;margin:0}
.hk-acid{color:#FFE600}
.hk-rail{border-top:2px solid #fff;border-bottom:2px solid #fff;color:#FFE600;font-family:'Archivo Black',sans-serif;text-transform:uppercase}

SHIP FAST LOUD AS HELL