1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: gallery-clip-wipe-grid-brutalist
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;
gsap.set('.cw-tile', { clipPath: 'inset(0 0 0 100%)' });
ScrollTrigger.batch('.cw-tile', {
start: 'top 92%',
onEnter: batch => gsap.to(batch, {
clipPath: 'inset(0 0 0 0)', duration: 0.9, ease: 'power3.out', stagger: 0.08
}),
}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: gallery-clip-wipe-grid-brutalist -->
<section class="cw-brut">
<header class="cw-brut__head">
<span class="cw-brut__eyebrow">INDEX / 008</span>
<h2 class="cw-brut__title">FIELD WORK</h2>
</header>
<div class="cw-brut__grid">
<figure class="cw-tile">
<div class="cw-tile__img"></div>
<figcaption><span class="cw-tile__num">01</span><span>STEEL</span></figcaption>
</figure>
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: gallery-clip-wipe-grid-brutalist */
:root {
--cw-bg: #ffffff;
--cw-ink: #0A0A0A;
--cw-hot: #FF4A1C;
}
.cw-brut { background: var(--cw-bg); font-family: 'JetBrains Mono', monospace; }
.cw-brut__title { text-transform: uppercase; letter-spacing: -0.02em; }
.cw-tile { border: 2px solid var(--cw-ink); border-radius: 0; }
.cw-tile figcaption { text-transform: uppercase; }