Content Batch Reveal Quiet — Motion Lab

Een rustig manifest. Zes regels. Geen accent.

We schrijven minder en bedoelen meer.
— interne richtlijn 01

Witruimte is een argument, geen leegte.
— interne richtlijn 02

Snelheid komt voort uit terughoudendheid.
— interne richtlijn 03

Een knop verdient één kleur, één plek.
— interne richtlijn 04

Beweging dient leesbaarheid, niet zichzelf.
— interne richtlijn 05

Het beste motion-werk valt bijna niet op.
— interne richtlijn 06

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

// Mechanisme: ScrollTrigger.batch — quiet, slow fade
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
ScrollTrigger.batch('.quiet-quote', {
  start: 'top 90%',
  onEnter: els => gsap.fromTo(els,
    { y: 30, autoAlpha: 0 },
    { y: 0, autoAlpha: 1, duration: 1.6, stagger: 0.08, ease: 'power1.out' }
  ),
  once: true
});

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

<!-- Skeleton: quiet quote stack -->
<section class="quiet-batch">
  <p class="quiet-batch__lead">Een rustig manifest. Zes regels. Geen accent.</p>
  <div class="quiet-batch__list">
    <blockquote class="quiet-quote"><p>We schrijven minder en bedoelen meer.</p><cite>— interne richtlijn 01</cite></blockquote>
    <blockquote class="quiet-quote"><p>Witruimte is een argument, geen leegte.</p><cite>— interne richtlijn 02</cite></blockquote>
    <blockquote class="quiet-quote"><p>Snelheid komt voort uit terughoudendheid.</p><cite>— interne richtlijn 03</cite></blockquote>
    <blockquote class="quiet-quote"><p>Een knop verdient één kleur, één plek.</p><cite>— interne richtlijn 04</cite></blockquote>
    <blockquote class="quiet-quote"><p>Beweging dient leesbaarheid, niet zichzelf.</p><cite>— interne richtlijn 05</cite></blockquote>
    <blockquote class="quiet-quote"><p>Het beste motion-werk valt bijna niet op.</p><cite>— interne richtlijn 06</cite></blockquote>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: quiet — paper, low-contrast, Inter 300 */
.quiet-batch { background:#F4F1EB; color:rgba(10,10,10,.7); padding:12vh 8vw; min-height:70vh; font-family:'Inter',sans-serif; font-weight:300; }
.quiet-batch__lead { font-size:.9rem; letter-spacing:.05em; max-width:34rem; margin:0 0 4rem; color:rgba(10,10,10,.5); }
.quiet-batch__list { display:flex; flex-direction:column; gap:3rem; max-width:42rem; }
.quiet-quote { margin:0; }
.quiet-quote p { font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.6; font-weight:300; margin:0 0 .5rem; color:rgba(10,10,10,.78); }
.quiet-quote cite { font-style:normal; font-size:.78rem; letter-spacing:.06em; color:rgba(10,10,10,.4); }