1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: ScrollTrigger.batch — kinetic snap reveal
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;
ScrollTrigger.batch('.kinetic-stat', {
start: 'top 90%',
onEnter: els => gsap.fromTo(els,
{ y: 30, autoAlpha: 0 },
{ y: 0, autoAlpha: 1, duration: 0.7, stagger: 0.08, ease: 'power4.out' }
),
once: true
}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: kinetic stats grid -->
<section class="kinetic-batch">
<header class="kinetic-batch__header">
<span class="kinetic-batch__eyebrow">2026 — Performance</span>
<h2 class="kinetic-batch__title">RAW NUMBERS<br>NO FILLER.</h2>
</header>
<div class="kinetic-batch__grid">
<article class="kinetic-stat"><span class="kinetic-stat__num">412%</span><span class="kinetic-stat__label">ROAS lift Q4</span></article>
<article class="kinetic-stat"><span class="kinetic-stat__num">0.7s</span><span class="kinetic-stat__label">Time to first paint</span></article>
<article class="kinetic-stat"><span class="kinetic-stat__num">2.1M</span><span class="kinetic-stat__label">Impressions / mo</span></article>
<article class="kinetic-stat"><span class="kinetic-stat__num">98</span><span class="kinetic-stat__label">Lighthouse score</span></article>
<article class="kinetic-stat"><span class="kinetic-stat__num">17×</span><span class="kinetic-stat__label">Pipeline velocity</span></article>
<article class="kinetic-stat"><span class="kinetic-stat__num">€8.4M</span><span class="kinetic-stat__label">Tracked revenue</span></article>
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: kinetic — pitch-black, electric yellow, brutal type */
.kinetic-batch { background:#0A0A0A; color:#F4F1EB; padding:8vh 6vw; min-height:70vh; font-family:'Archivo Black','Anton',sans-serif; }
.kinetic-batch__eyebrow { font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#FFE600; }
.kinetic-batch__title { font-size:clamp(2.5rem,7vw,6rem); line-height:.9; letter-spacing:-.03em; margin:1rem 0 4rem; text-transform:uppercase; }
.kinetic-batch__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:#FFE600; border:1px solid #FFE600; }
.kinetic-stat { background:#0A0A0A; padding:2.5rem; display:flex; flex-direction:column; gap:.6rem; border-radius:0; }
.kinetic-stat__num { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; color:#FFE600; }
.kinetic-stat__label { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(244,241,235,.7); }