G77 · כותרת מקו מתאר למילוי בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* G77 · כותרת מקו מתאר למילוי בגלילה */
.ol{max-width:min(1000px,94vw);margin-inline:auto;padding-block:16vh}
.ol h2{font-size:clamp(38px,7.5vw,120px);line-height:1.05;margin:0;font-weight:800;text-align:center}
.ol .w{display:inline-block;margin-inline:.12em;color:transparent;-webkit-text-stroke:1.6px var(--ink, #16182b);paint-order:stroke fill}
@media(max-width:767px){.ol .w{-webkit-text-stroke-width:1px}}

HTML

<div class="stage"><div class="ol"><h2><span class="w">לא</span><span class="w">עוד</span><span class="w">אתר.</span><br><span class="w">מכונה</span><span class="w">שמייצרת</span><span class="w">פניות.</span></h2></div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const words=gsap.utils.toArray(".ol .w");
  const ink=getComputedStyle(document.documentElement).getPropertyValue("--ink").trim()||"#16182b";
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(words,{color:ink});return;}
  gsap.to(words,{color:ink,stagger:.35,ease:"none",scrollTrigger:{trigger:".ol",start:"top 75%",end:"bottom 45%",scrub:.5}});
})();