// Mechanisme: pin + horizontal scrub
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const track = document.querySelector('.brut-track');
const pin = document.querySelector('.brut-pin');
const dist = track.scrollWidth - pin.clientWidth;
gsap.to(track, {
  x: -dist,
  ease: 'none',
  scrollTrigger: {
    trigger: pin,
    start: 'top top',
    end: () => '+=' + dist,
    pin: true,
    scrub: 0.6,
    invalidateOnRefresh: true
  }
});

<!-- Skeleton: brutalist horizontal panels -->
<section class="brut-pin">
  <div class="brut-track">
    <article class="brut-panel"><span class="brut-panel__num">01 / 05</span><h3>BRIEF</h3><p>Geen meeting van 60 min. Eén pagina. Klaar in een uur.</p></article>
    <article class="brut-panel"><span class="brut-panel__num">02 / 05</span><h3>STRATEGY</h3><p>We pakken de bottleneck. Niets meer, niets minder.</p></article>
    <article class="brut-panel"><span class="brut-panel__num">03 / 05</span><h3>BUILD</h3><p>Ship in twee weken. Dan iteratie op data, niet meningen.</p></article>
    <article class="brut-panel"><span class="brut-panel__num">04 / 05</span><h3>SCALE</h3><p>Wat werkt, krijgt budget. Wat niet werkt: kill direct.</p></article>
    <article class="brut-panel"><span class="brut-panel__num">05 / 05</span><h3>REPORT</h3><p>Geen dashboards. Eén nummer dat de week samenvat.</p></article>
  </div>
</section>

/* Styling: brutalist — white, hard borders, mono caps */
.brut-pin { background:#FFFFFF; color:#0A0A0A; height:70vh; min-height:480px; overflow:hidden; position:relative; border-top:2px solid #0A0A0A; border-bottom:2px solid #0A0A0A; }
.brut-track { display:flex; height:100%; will-change:transform; }
.brut-panel { flex:0 0 80vw; max-width:680px; height:100%; padding:3rem; border-right:2px solid #0A0A0A; display:flex; flex-direction:column; justify-content:space-between; font-family:'JetBrains Mono',monospace; }
.brut-panel:nth-child(odd) { background:#FFFFFF; }
.brut-panel:nth-child(even) { background:#F2F2F2; }
.brut-panel__num { font-size:.75rem; letter-spacing:.2em; color:#FF4A1C; }
.brut-panel h3 { font-size:clamp(2rem,5vw,3.5rem); margin:0; text-transform:uppercase; letter-spacing:-.02em; line-height:1; }
.brut-panel p { font-size:.95rem; line-height:1.5; max-width:34ch; margin:0; text-transform:none; }