← Blurr Motion process-numbered-reveal-brutalist
Categorie process Tier 1 Techniek #1 Deps gsap
// PROCESS — 5 STEPS

SHIP / WEEK / EVERY

  1. 01

    BRIEF

    Strip the meeting.

  2. 02

    SCOPE

    Cut to the bone.

  3. 03

    BUILD

    Code, not slides.

  4. 04

    SHIP

    Push to live.

  5. 05

    ITERATE

    Loop, don’t stall.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: process-numbered-reveal-brutalist
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 items = gsap.utils.toArray('.br-card');
if (reduce) { gsap.set(items, { autoAlpha: 1, y: 0 }); }
else {
  gsap.set(items, { y: 60, autoAlpha: 0 });
  ScrollTrigger.batch(items, {
    start: 'top 85%',
    onEnter: (els) => gsap.to(els, { y: 0, autoAlpha: 1, duration: 0.6, stagger: 0.12, ease: 'power4.out' }),
    once: true
  });
}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: process-numbered-reveal-brutalist -->
<section class="br-wrap">
  <header class="br-head">
    <span class="br-tag">// PROCESS — 5 STEPS</span>
    <h2 class="br-title">SHIP / WEEK / EVERY</h2>
  </header>
  <ol class="br-list">
    <li class="br-card"><span class="br-num">01</span><h3>BRIEF</h3><p>Strip the meeting.</p></li>
    <li class="br-card"><span class="br-num">02</span><h3>SCOPE</h3><p>Cut to the bone.</p></li>
    <li class="br-card"><span class="br-num">03</span><h3>BUILD</h3><p>Code, not slides.</p></li>
    <li class="br-card"><span class="br-num">04</span><h3>SHIP</h3><p>Push to live.</p></li>
    <li class="br-card last"><span class="br-num">05</span><h3>ITERATE</h3><p>Loop, don't stall.</p></li>
  </ol>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: process-numbered-reveal-brutalist — brutalist */
.br-wrap { background:#FFFFFF; color:#000; padding:6vh 5vw; min-height:100vh; font-family:'JetBrains Mono',ui-monospace,monospace; }
.br-head { border:2px solid #000; padding:1.25rem; margin-bottom:2rem; }
.br-tag { font-size:.72rem; letter-spacing:.16em; }
.br-title { font-family:'Archivo Black','Archivo',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,5vw,4.5rem); line-height:.95; margin:.4rem 0 0; letter-spacing:-.02em; }
.br-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.br-card { border:2px solid #000; border-right:none; padding:1.25rem; min-height:42vh; display:flex; flex-direction:column; justify-content:space-between; background:#fff; border-radius:0; }
.br-card.last { border-right:2px solid #000; background:#FF4A1C; color:#fff; }
.br-num { font-family:'Archivo Black',sans-serif; font-size:clamp(3rem,7vw,6rem); line-height:1; letter-spacing:-.04em; }
.br-card h3 { font-family:'JetBrains Mono',monospace; font-weight:500; text-transform:uppercase; letter-spacing:.16em; margin:1.5rem 0 .4rem; font-size:.95rem; }
.br-card p { margin:0; font-size:.85rem; line-height:1.4; }
@media (max-width: 760px){ .br-list{ grid-template-columns:1fr; } .br-card{ border-right:2px solid #000; border-bottom:none; min-height:auto; } .br-card.last{ border-bottom:2px solid #000; } }