1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: SVG path-attr morph loop, expo.out cadence
import gsap from 'https://esm.sh/[email protected]';
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
document.querySelectorAll('[data-morph]').forEach((group, gi) => {
const live = group.querySelector('.morph-live');
const states = Array.from(group.querySelectorAll('[data-state]')).map(n => n.getAttribute('d'));
let i = 0;
setTimeout(() => setInterval(() => {
i = (i + 1) % states.length;
gsap.to(live, { attr: { d: states[i] }, duration: 1.4, ease: 'expo.out' });
}, 3500), gi * 600);
}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: editorial three-figure SVG morph essay -->
<section class="emorph">
<header class="emorph__head">
<span class="emorph__eyebrow">Een visueel essay</span>
<h2 class="emorph__title">Drie <em>vormen</em>, één gedachte.</h2>
</header>
<div class="emorph__grid">
<figure class="emorph__cell" data-morph>
<svg viewBox="0 0 200 200" class="emorph__svg">
<path class="morph-live" d="..." />
<path data-state d="circle..." />
<path data-state d="square..." />
<path data-state d="triangle..." />
</svg>
<figcaption>I. Cirkel — de aanvang.</figcaption>
</figure>
<figure class="emorph__cell" data-morph>...</figure>
<figure class="emorph__cell" data-morph>...</figure>
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: editorial — paper cream, serif Fraunces, asymmetric */
.emorph { background:#F4F1EB; color:#0A0A0A; padding:10vh 6vw; min-height:70vh; }
.emorph__head { max-width:48rem; margin:0 0 5vh; }
.emorph__eyebrow { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(10,10,10,.55); }
.emorph__title { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2.2rem,5vw,4.4rem); line-height:1.05; letter-spacing:-.02em; margin:1rem 0 0; }
.emorph__title em { font-style:italic; color:rgba(10,10,10,.55); font-weight:300; }
.emorph__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:3rem; align-items:end; }
.emorph__cell { margin:0; display:flex; flex-direction:column; gap:1.2rem; }
.emorph__cell:nth-child(2) { transform:translateY(3rem); }
.emorph__cell:nth-child(3) { transform:translateY(-1.5rem); }
.emorph__svg { width:100%; max-width:200px; height:auto; }
.emorph__svg .morph-live { fill:none; stroke:#0A0A0A; stroke-width:1.4; }
.emorph__cell figcaption { font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:.95rem; color:rgba(10,10,10,.65); }