Hero Word Reveal Kinetic — Motion Lab

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

// Mechanisme: hero-word-reveal-kinetic
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// split words → mask + inner span, stagger 0.07, yPercent 110→0, autoAlpha
// snappy power4.out 0.7s, ScrollTrigger start: 'top 90%' once
// last word gets ww-accent class (acid yellow)
// reduced-motion: end-state set, geen animatie

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

<!-- Skeleton: hero-word-reveal-kinetic -->
<section class="hero hero-wrk">
  <header class="hero-bar"><span>BLURR / MOTION</span><span>2026</span></header>
  <div class="hero-stage">
    <p class="hero-eyebrow">// thesis 04</p>
    <h1 class="hero-title word-reveal-target">Make it move make it loud make it last.</h1>
    <div class="hero-foot"><span class="counter">0 / 1</span><span class="hint">Scroll trigger · top 90%</span></div>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-word-reveal-kinetic */
:root{ --wk-black:#0A0A0A; --wk-acid:#FFE600; }
.hero-wrk{background:var(--wk-black);color:#fff}
.hero-wrk .hero-title{font-family:'Archivo Black',sans-serif;font-weight:900;font-size:clamp(3.5rem,8vw,8rem);text-transform:uppercase;line-height:.95;letter-spacing:-.03em}
.hero-wrk .ww{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-wrk .wi{display:inline-block;will-change:transform,opacity}
.hero-wrk .ww-accent .wi{color:var(--wk-acid)}