G74 · משקל הפונט זורם בגלילה

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}

/* G74 · משקל הפונט זורם בגלילה */
.wv{max-width:min(900px,92vw);margin-inline:auto;padding-block:20vh}
.wv h2{font-family:"Heebo",system-ui,sans-serif;font-size:clamp(34px,6vw,96px);line-height:1.15;margin:0;font-weight:200;text-align:center}
.wv .w{display:inline-block;margin-inline:.14em;font-weight:200}
.wv-hint{text-align:center;color:var(--muted, #6a6d85);font-size:14px;margin-top:20px}

HTML

<div class="stage"><div class="wv">
  <h2><span class="w">אתר</span><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><span class="w">מוכר.</span></h2>
  <p class="wv-hint">גלול לאט</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const words=gsap.utils.toArray(".wv .w");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(words,{fontWeight:600});return;}
  const mm=gsap.matchMedia();
  mm.add({desk:"(min-width:768px)",mob:"(max-width:767px)"},ctx=>{
    const [lo,hi]=ctx.conditions.desk?[200,900]:[300,700];
    const tl=gsap.timeline({scrollTrigger:{trigger:".wv",start:"top 70%",end:"bottom 30%",scrub:.6}});
    words.forEach((w,i)=>{
      // כל מילה עולה ויורדת בתורה: גל שעובר על המשפט
      tl.fromTo(w,{fontWeight:lo},{fontWeight:hi,duration:1,ease:"none"},i*.35);
      // המילה האחרונה נשארת שמנה: הגל נגמר בהדגשה ולא חוזר לאפס
      if(i<words.length-1)tl.to(w,{fontWeight:lo,duration:1,ease:"none"},i*.35+1.2);
    });
  });
})();