← Blurr Motion content-line-reveal-minimal
Categorie content Tier 1 Techniek #4 Deps gsap, ScrollTrigger
Essay 01 — On craft

Slow software is a kind of respect.

We built things fast for years and called it productivity. The cost was felt later: in the friction of every interaction, in the small daily indignities of poorly considered software.

Reduction is the discipline of removing what does not contribute. It is not the same as minimalism — minimalism is an aesthetic choice, reduction is an ethical one.

A short list of things we removed

Decorative shadows. Confirmation modals that confirmed nothing. Animations that performed expertise rather than communicated state. Tooltips for buttons that already had labels.

What remains is a quieter surface — a page that respects the time of the person reading it, that does not interrupt itself.

— end of section —

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: line-by-line reveal via ScrollTrigger.batch (laag A)
// FromTo y:30,autoAlpha:0 → y:0,autoAlpha:1 op alle [data-line]-elementen.
// Batch zorgt dat meerdere lijnen die tegelijk in viewport komen samen
// staggeren — geen losse triggers per element.
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) {
    document.querySelectorAll('[data-line]').forEach(el => {
      el.style.opacity = '1';
      el.style.transform = 'none';
    });
    return;
  }

  const targets = document.querySelectorAll('[data-line]');
  if (!targets.length) return;

  gsap.set(targets, { y: 30, autoAlpha: 0 });

  ScrollTrigger.batch('[data-line]', {
    start: 'top 90%',
    onEnter: batch => gsap.to(batch, {
      y: 0,
      autoAlpha: 1,
      duration: 0.8,
      stagger: 0.06,
      ease: 'power2.out',
      overwrite: true,
    }),
  });

  // Refresh zodat batch ook fired voor elementen die al in viewport staan
  // op load (dit block heeft demo direct in beeld).
  requestAnimationFrame(() => ScrollTrigger.refresh());
})();
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: line-reveal minimal (laag B) -->
<!-- Echte editorial body: eyebrow + h2 + meerdere paragrafen + sub-h3 -->
<article class="lr-article">
  <span data-line class="lr-eyebrow">Essay 01 — On craft</span>
  <h2 data-line class="lr-headline">Slow software is a kind of respect.</h2>
  <p data-line class="lr-lede">
    We built things fast for years and called it productivity. The cost was
    felt later: in the friction of every interaction, in the small daily
    indignities of poorly considered software.
  </p>
  <p data-line class="lr-body">
    Reduction is the discipline of removing what does not contribute. It is
    not the same as minimalism — minimalism is an aesthetic choice, reduction
    is an ethical one.
  </p>
  <h3 data-line class="lr-sub">A short list of things we removed</h3>
  <p data-line class="lr-body">
    Decorative shadows. Confirmation modals that confirmed nothing.
    Animations that performed expertise rather than communicated state.
    Tooltips for buttons that already had labels.
  </p>
  <p data-line class="lr-body">
    What remains is a quieter surface — a page that respects the time of
    the person reading it, that does not interrupt itself.
  </p>
  <p data-line class="lr-closer">— end of section —</p>
</article>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling-template: MINIMAL (laag C) */
.lr-article {
  max-width: 62ch;
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Archivo', sans-serif;
  color: #0A0A0A;
}
.lr-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(10,10,10,.55);
  margin-bottom: 32px;
  position: relative;
  padding-left: 28px;
}
.lr-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 1px;
  background: #0A0A0A;
}
.lr-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 36px;
}
.lr-lede {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.lr-body {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
  color: rgba(10,10,10,.78);
}
.lr-sub {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  margin: 32px 0 16px;
}
.lr-closer {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(10,10,10,.45);
  margin-top: 40px;
}