G16 · מילים מתרוקנות בהובר

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}
.center{text-align:center}

/* G16 · מילים מתרוקנות בהובר */
.hovt{font-size:var(--fs-demo, clamp(36px, 3vw + 0.5rem, 76px));line-height:1.25;font-weight:800;max-width:22ch;margin-inline:auto;cursor:default}

HTML

<div class="stage tight center"><h2 class="hovt">כל מילה בכותרת הזאת מגיבה למגע העכבר שלך בנפרד ובזמן אמת</h2></div>

JS

gsap.registerPlugin(SplitText);

const split=new SplitText(".hovt",{type:"words"});
gsap.set(split.words,{display:"inline-block"});
split.words.forEach(w=>{
  w.addEventListener("mouseenter",()=>gsap.to(w,{color:"transparent","-webkit-text-stroke":"1.5px #16182b",duration:.15}));
  w.addEventListener("mouseleave",()=>gsap.to(w,{color:"#16182b","-webkit-text-stroke":"0px transparent",duration:.15}));
});