1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: cta-scrub-banner-brutalist (techniek #8 — pin + scrub)
// Pin de section, scrub side-to-side x-translatie + opacity stutter op "BEGIN. / BEGIN. / BEGIN."
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const sec = document.querySelector('.brut-scrub-section');
if (sec && !reduce) {
gsap.to('.brut-scrub-track', {
xPercent: -50, ease:'none',
scrollTrigger: { trigger: sec, start:'top top', end:'+=120%', pin:true, scrub:0.8 }
});
gsap.to('.brut-stutter span', {
opacity: 0.25, ease:'steps(3)', stagger:0.05,
scrollTrigger: { trigger: sec, start:'top top', end:'+=120%', scrub:true }
});
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: cta-scrub-banner-brutalist -->
<section class="brut-scrub-section">
<div class="brut-scrub-track">
<span class="brut-banner">BEGIN.</span>
<span class="brut-banner">BEGIN.</span>
<span class="brut-banner">BEGIN.</span>
</div>
<div class="brut-stutter">
<span>—</span><span>—</span><span>—</span>
</div>
<a class="brut-cta-btn" href="#">[ START NOW ]</a>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: cta-scrub-banner-brutalist */
:root { --block-bg:#FFFFFF; --block-fg:#0A0A0A; --block-accent:#FF4A1C; }
.brut-scrub-section { min-height:100vh; background:#fff; color:#0A0A0A; font-family:'JetBrains Mono', monospace; border-top:2px solid #0A0A0A; border-bottom:2px solid #0A0A0A; overflow:hidden; }
.brut-scrub-track { display:inline-flex; gap:4rem; white-space:nowrap; }
.brut-banner { border:2px solid #0A0A0A; padding:1.5rem 2.5rem; font-size:clamp(4rem,12vw,11rem); font-weight:700; letter-spacing:-.04em; }
.brut-cta-btn { display:inline-block; border:2px solid #0A0A0A; background:#FF4A1C; color:#fff; padding:1rem 2rem; text-transform:uppercase; text-decoration:none; }