← Blurr Motion content-line-reveal-specimen
Categorie content Tier 1 Techniek #4 Deps gsap
04 Technique / Line reveal · Specimen sheet

SPEC · 04 · LINE REVEAL

Type
arrives,
line by line.

A foundry-grid demonstration of staggered y-translation paired with autoAlpha — built for typography that wants to be read, not skimmed.

Each line waits its turn. The grid is fixed; the timing is the only variable. 1.4 seconds, exponential out, ninety milliseconds between siblings.

No clip-path tricks, no SplitText. Just transform plus opacity, batched through ScrollTrigger so the GPU never blinks.

End of specimen.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: content-line-reveal-specimen — duration 1.4s, expo.out, stagger 0.09
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.4, ease: "expo.out", stagger: 0.09,
      overwrite: "auto"
    })
  });
}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: content-line-reveal-specimen — foundry-grid, hairlines, large numerals -->
<section class="lr-specimen">
  <header class="lr-spec-head">
    <span class="lr-num">04</span>
    <span class="lr-meta">Technique / Line reveal · Specimen sheet</span>
  </header>
  <hr class="lr-hair"/>
  <div class="lr-spec-body">
    <p class="lr-spec-eyebrow" data-line>SPEC · 04 · LINE REVEAL</p>
    <h2 class="lr-spec-h" data-line>Type<br/>arrives,<br/>line by line.</h2>
    <p class="lr-spec-lede" data-line>A foundry-grid demonstration of staggered y-translation paired with autoAlpha — built for typography that wants to be read, not skimmed.</p>
    <p class="lr-spec-p" data-line>Each line waits its turn. The grid is fixed; the timing is the only variable. 1.4 seconds, exponential out, ninety milliseconds between siblings.</p>
    <p class="lr-spec-p" data-line>No clip-path tricks, no SplitText. Just transform plus opacity, batched through ScrollTrigger so the GPU never blinks.</p>
    <p class="lr-spec-closer" data-line>End of specimen.</p>
  </div>
  <hr class="lr-hair"/>
  <footer class="lr-spec-foot">
    <span>01 / 01</span><span>Set in Fraunces & JetBrains Mono</span>
  </footer>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: content-line-reveal-specimen — pure type-driven foundry-grid */
.lr-specimen{
  --paper:#FAFAF7; --ink:#0A0A0A; --hair:#0A0A0A;
  background:var(--paper); color:var(--ink);
  padding:clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5rem);
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
.lr-spec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.lr-num{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(6rem,18vw,16rem); line-height:.85; letter-spacing:-.04em; }
.lr-meta{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding-bottom:1.2rem; }
.lr-hair{ border:0; border-top:1px solid var(--hair); margin:1rem 0; }
.lr-spec-body{ display:grid; grid-template-columns:1fr; gap:1.2rem; padding:2rem 0; max-width:72ch; }
.lr-spec-eyebrow{ font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; margin:0; }
.lr-spec-h{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.6rem,7vw,6rem); line-height:.95; letter-spacing:-.03em; margin:.5rem 0 2rem; }
.lr-spec-lede{ font-family:"Fraunces",serif; font-style:italic; font-weight:300; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.55; margin:0 0 1rem; max-width:52ch; }
.lr-spec-p{ font-size:.85rem; line-height:1.8; max-width:64ch; margin:0 0 .8rem; }
.lr-spec-closer{ font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; margin-top:1.5rem; }
.lr-spec-foot{ display:flex; justify-content:space-between; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; padding-top:.8rem; }