1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: cta-marquee-velocity-brutalist (techniek #16)
// Infinite x-translate via gsap.to(track, {x:()=>-track.scrollWidth/2, repeat:-1, ease:'none'})
// Scroll-velocity hijack: timeScale = clamp(|dy|*0.06+1, 1, 4) met decay terug naar 1.
import gsap from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const track = document.querySelector('.brut-marquee-track');
if (track && !reduce) {
const tw = gsap.to(track, { x: () => -track.scrollWidth / 2, duration: 25, ease: 'none', repeat: -1 });
let last = window.scrollY, target = 1;
window.addEventListener('scroll', () => {
const v = Math.abs(window.scrollY - last);
target = Math.min(4, v * 0.06 + 1);
last = window.scrollY;
}, { passive: true });
gsap.ticker.add(() => {
const cur = tw.timeScale();
tw.timeScale(cur + (target - cur) * 0.08);
target += (1 - target) * 0.04;
});
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: cta-marquee-velocity-brutalist -->
<section class="brut-cta">
<div class="brut-rule-top"></div>
<div class="brut-marquee-viewport">
<div class="brut-marquee-track">
<span class="brut-item">BUILD WITH US</span>
<span class="brut-dot">●</span>
<span class="brut-item">START TODAY</span>
</div>
</div>
<a class="brut-cta-btn" href="#">[ APPLY NOW ]</a>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: cta-marquee-velocity-brutalist */
:root { --block-bg:#FFFFFF; --block-fg:#0A0A0A; --block-accent:#FF4A1C; }
.brut-cta { background:#fff; color:#0A0A0A; font-family:'JetBrains Mono', monospace; }
.brut-marquee-viewport { overflow:hidden; padding:1.5rem 0; border-top:2px solid #0A0A0A; border-bottom:2px solid #0A0A0A; }
.brut-marquee-track { display:inline-flex; gap:3rem; white-space:nowrap; will-change:transform; }
.brut-item { font-size:clamp(3rem,9vw,7rem); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; }
.brut-dot { color:#FF4A1C; font-size:clamp(3rem,9vw,7rem); }
.brut-cta-btn { display:inline-block; border:2px solid #0A0A0A; padding:1rem 2rem; text-transform:uppercase; text-decoration:none; color:#0A0A0A; font-weight:700; }