← Blurr Motion content-line-reveal-editorial
Categorie content Tier 1 Techniek #4 Deps gsap

Een goed verhaal opent zich langzaam regel voor regel.

Editorial line-reveal toont copy zoals een drukker een proefdruk onthult — kalm, gemeten, zonder haast.

Elke regel arriveert wanneer het oog er klaar voor is. Geen overlappende geluiden, geen visuele ruis — alleen ritme.

Het tempo komt uit de typografie zelf: een Fraunces-italic die ademt tussen de rechtopstaande romein, en een lengte die dwingt tot pauze.

— en zo lees je verder.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: content-line-reveal-editorial — duration 1.0s, expo.out, stagger 0.07
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 lines = document.querySelectorAll("[data-line]");
if (reduce) {
  gsap.set(lines, { y: 0, autoAlpha: 1 });
} else {
  gsap.set(lines, { y: 30, autoAlpha: 0 });
  ScrollTrigger.batch("[data-line]", {
    start: "top 88%",
    once: true,
    onEnter: (els) => gsap.to(els, {
      y: 0, autoAlpha: 1,
      duration: 1.0, ease: "expo.out", stagger: 0.07,
      overwrite: "auto"
    })
  });
}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: content-line-reveal-editorial — asymmetric, side-eyebrow + rule -->
<section class="lr-editorial">
  <aside class="lr-side">
    <span class="lr-eyebrow">N°04 / Reveal</span>
    <span class="lr-rule"></span>
  </aside>
  <article class="lr-body">
    <h2 class="lr-h">
      <span data-line>Een goed verhaal</span>
      <span data-line><em>opent zich langzaam</em></span>
      <span data-line>regel voor regel.</span>
    </h2>
    <p class="lr-lede" data-line>Editorial line-reveal toont copy zoals een drukker een proefdruk onthult — kalm, gemeten, zonder haast.</p>
    <p class="lr-p" data-line>Elke regel arriveert wanneer het oog er klaar voor is. Geen overlappende geluiden, geen visuele ruis — alleen ritme.</p>
    <p class="lr-p" data-line>Het tempo komt uit de typografie zelf: een Fraunces-italic die ademt tussen de rechtopstaande romein, en een lengte die dwingt tot pauze.</p>
    <p class="lr-closer" data-line>— en zo lees je verder.</p>
  </article>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: content-line-reveal-editorial — Fraunces serif italic-mix, asymmetric */
.lr-editorial{
  --paper:#F4F1EB; --ink:#0A0A0A; --muted:rgba(10,10,10,.55); --rule:rgba(10,10,10,.18);
  background:var(--paper); color:var(--ink);
  display:grid; grid-template-columns: 200px 1fr;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(4rem,10vw,9rem) clamp(1.5rem,5vw,5rem);
  font-family:"Fraunces",Georgia,serif;
}
@media (max-width:760px){ .lr-editorial{ grid-template-columns:1fr; } }
.lr-side{ display:flex; flex-direction:column; gap:1rem; padding-top:.6rem; }
.lr-eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.lr-rule{ width:64px; height:1px; background:var(--ink); }
.lr-body{ max-width:62ch; }
.lr-h{ font-weight:300; font-size:clamp(2.2rem,5vw,4.4rem); line-height:1.05; letter-spacing:-.015em; margin:0 0 2rem; }
.lr-h span{ display:block; overflow:hidden; }
.lr-h em{ font-style:italic; font-weight:400; color:var(--ink); }
.lr-lede{ font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.55; font-style:italic; font-weight:300; margin:0 0 1.5rem; max-width:48ch; }
.lr-p{ font-family:"Archivo",sans-serif; font-size:1rem; line-height:1.75; color:rgba(10,10,10,.78); margin:0 0 1.2rem; max-width:58ch; }
.lr-closer{ font-style:italic; color:var(--muted); margin-top:2rem; }