1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: hero-char-reveal-brutalist
import gsap from 'https://esm.sh/[email protected]';
const el = document.querySelector('.char-reveal-target');
if (el) {
const t = el.textContent.trim();
el.innerHTML = [...t].map(c => c === ' '
? '<span class="cw" style="display:inline-block;width:.35em"> </span>'
: '<span class="cw" style="display:inline-block;overflow:hidden;vertical-align:bottom"><span class="ci" style="display:inline-block;will-change:transform">' + c + '</span></span>'
).join('');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
gsap.set(el.querySelectorAll('.ci'), { yPercent: 0, autoAlpha: 1 });
} else {
gsap.fromTo(el.querySelectorAll('.ci'),
{ yPercent: 110, autoAlpha: 0 },
{ yPercent: 0, autoAlpha: 1, duration: 0.7, stagger: 0.025, ease: 'power4.out' }
);
}
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: hero-char-reveal-brutalist -->
<section class="hb-stage">
<header class="hb-bar">
<span>INDEX // 001</span>
<span>HEROES — CHAR REVEAL</span>
<span>BRUTALIST</span>
</header>
<div class="hb-frame">
<h1 class="char-reveal-target">TYPE THAT MOVES</h1>
</div>
<footer class="hb-foot">
<span>● LIVE</span>
<span>STAGGER 0.025s · POWER4.OUT</span>
</footer>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: hero-char-reveal-brutalist */
.hb-stage{background:#fff;color:#0A0A0A;border:2px solid #0A0A0A;font-family:'JetBrains Mono',monospace}
.hb-bar,.hb-foot{border-bottom:2px solid #0A0A0A;padding:1rem 1.5rem;display:flex;justify-content:space-between;text-transform:uppercase;font-size:.7rem;letter-spacing:.12em}
.hb-foot{border-bottom:0;border-top:2px solid #0A0A0A}
.hb-frame{border-bottom:2px solid #0A0A0A;padding:clamp(2rem,6vw,5rem) clamp(1.5rem,4vw,3rem)}
.char-reveal-target{font-family:'Archivo Black','Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(3rem,12vw,11rem);line-height:.88;letter-spacing:-.03em;margin:0;color:#0A0A0A}