1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: testimonial-marquee-brutalist
// GSAP infinite x-translate over verdubbelde track. Pause-on-hover via timeScale.
// Track-content moet 2x dezelfde set bevatten voor seamless wrap op -scrollWidth/2.
import gsap from 'https://esm.sh/[email protected]';
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const track = document.querySelector('.tmb-track');
const wrap = document.querySelector('.tmb-marquee');
const tween = gsap.to(track, {
x: () => -track.scrollWidth / 2,
duration: 30, ease: 'none', repeat: -1
});
wrap.addEventListener('mouseenter', () => tween.timeScale(0));
wrap.addEventListener('mouseleave', () => tween.timeScale(1)); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: testimonial-marquee-brutalist -->
<div class="tmb-marquee">
<div class="tmb-track">
<span class="tmb-quote">// QUOTE</span>
<span class="tmb-sep">x</span>
<!-- repeat x N, daarna duplicate hele set voor seamless loop -->
</div>
</div> 3. Styling-template — verplicht eigen invulling per merk
/* Styling-template: testimonial-marquee-brutalist */
:root {
--tmb-bg: #FFFFFF;
--tmb-ink: #000000;
--tmb-hot: #FF4A1C;
--tmb-border: 2px solid #000000;
--tmb-font: 'JetBrains Mono', monospace;
}