1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: footer-manifest-reveal-brutalist (techniek #5 — ScrollTrigger.batch reveal)
// Manifest-statements in 2px hard-bordered cells. Bij viewport-enter: staggered fade + x-slide vanuit -40px.
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 cells = gsap.utils.toArray('.manifest-cell');
gsap.set(cells, { autoAlpha: reduce ? 1 : 0, x: reduce ? 0 : -40 });
if (!reduce) {
ScrollTrigger.batch(cells, {
start: 'top 92%',
onEnter: (els) => gsap.to(els, { autoAlpha: 1, x: 0, duration: 0.7, stagger: 0.12, ease: 'power3.out' })
});
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: footer-manifest-reveal-brutalist -->
<footer class="manifest-brut">
<div class="manifest-grid">
<div class="manifest-cell">WE BELIEVE.</div>
<!-- 6-8 cells totaal, laatste = .is-hot -->
</div>
</footer> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: footer-manifest-reveal-brutalist */
:root {
--block-bg: #FFFFFF;
--block-fg: #000000;
--block-hot: #FF4A1C;
}
.manifest-brut { background: var(--block-bg); color: var(--block-fg); padding: clamp(3rem,8vw,7rem) clamp(1.5rem,5vw,4rem); border-top: 2px solid #000; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; }
.manifest-brut .manifest-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; border-left: 2px solid #000; border-top: 2px solid #000; }
.manifest-brut .manifest-cell { border-right: 2px solid #000; border-bottom: 2px solid #000; padding: clamp(1.5rem,4vw,3rem); font-size: clamp(1.5rem,3vw,2.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; background: #fff; }
.manifest-brut .manifest-cell.is-hot { background: var(--block-hot); color: #fff; }
@media (max-width: 720px) { .manifest-brut .manifest-grid { grid-template-columns: 1fr; } }