1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: hero-parallax-layers-brutalist
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) {
// static eindstate — geen parallax
} else {
gsap.to('.parallax-bg', { yPercent: -30, ease: 'none', scrollTrigger: { trigger: '.parallax-section', start: 'top bottom', end: 'bottom top', scrub: true } });
gsap.to('.parallax-mid', { yPercent: 0, ease: 'none', scrollTrigger: { trigger: '.parallax-section', start: 'top bottom', end: 'bottom top', scrub: true } });
gsap.to('.parallax-fg', { yPercent: 30, ease: 'none', scrollTrigger: { trigger: '.parallax-section', start: 'top bottom', end: 'bottom top', scrub: true } });
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: hero-parallax-layers-brutalist -->
<section class="parallax-section hp-stage">
<div class="parallax-bg hp-layer">
<span class="hp-block hp-block--xl"></span>
<span class="hp-cross"></span>
</div>
<div class="parallax-mid hp-layer">
<h1 class="hp-title">FORM // FORCE</h1>
</div>
<div class="parallax-fg hp-layer">
<span class="hp-label">LAYER 03 · FG</span>
<span class="hp-bar"></span>
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: hero-parallax-layers-brutalist */
.hp-stage{position:relative;height:100vh;background:#fff;overflow:hidden;border:2px solid #0A0A0A;font-family:'JetBrains Mono',monospace}
.hp-layer{position:absolute;inset:0;will-change:transform}
.hp-block{position:absolute;background:#0A0A0A}
.hp-block--xl{width:38vmin;height:38vmin;top:18%;left:8%}
.hp-cross{position:absolute;width:120px;height:120px;top:14%;right:10%;background:linear-gradient(#FF4A1C,#FF4A1C) center/100% 16px no-repeat,linear-gradient(#FF4A1C,#FF4A1C) center/16px 100% no-repeat}
.hp-title{font-family:'Archivo Black','Archivo',sans-serif;font-weight:900;font-size:clamp(4rem,15vw,14rem);line-height:.85;text-transform:uppercase;color:#0A0A0A;margin:0;text-align:center;letter-spacing:-.04em}