Footer Marquee Mega Brutalist — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: footer-marquee-mega-brutalist (techniek #16 — auto-scrolling marquee)
// Mega font-size 16-22vw. gsap.to translateX -50% repeat:-1 duration 35s ease 'none'. Pause-on-hover.
import gsap from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const track = document.querySelector('.mega-marquee-track');
if (track && !reduce) {
  const tw = gsap.to(track, { xPercent: -50, duration: 35, ease: 'none', repeat: -1 });
  track.parentElement.addEventListener('mouseenter', () => tw.timeScale(0));
  track.parentElement.addEventListener('mouseleave', () => tw.timeScale(1));
}

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: footer-marquee-mega-brutalist -->
<footer class="mega-marquee-brut">
  <div class="mega-marquee-rail">
    <div class="mega-marquee-track">
      <span>BLURR · </span><span>MOTION · </span><span class="is-hot">BLURR · </span><span>MOTION · </span>
      <!-- duplicaat voor seamless loop -->
    </div>
  </div>
</footer>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: footer-marquee-mega-brutalist */
:root {
  --block-bg: #FFFFFF;
  --block-fg: #000000;
  --block-hot: #FF4A1C;
}
.mega-marquee-brut { background: var(--block-bg); color: var(--block-fg); }
.mega-marquee-brut .mega-marquee-rail { overflow: hidden; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 0; }
.mega-marquee-brut .mega-marquee-track { display: inline-flex; white-space: nowrap; will-change: transform; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(16vw, 20vw, 22vw); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.mega-marquee-brut .mega-marquee-track > span { padding: 0 .25em; }
.mega-marquee-brut .mega-marquee-track > span.is-hot { color: var(--block-hot); }