G127 · מעבר לכהה בגלילה: עיגול שגדל ומחליף ערכה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}

/* G127 · מעבר לכהה בגלילה: עיגול שגדל ומחליף ערכה */
.tn2{position:relative;height:220vh}
.tn2-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.tn2-l{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.tn2-l.light{background:var(--bg, #f7f7fa);color:var(--ink, #16182b)}
.tn2-l.dark{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);clip-path:circle(0% at 88% 12%);will-change:clip-path}
.tn2-l h2{margin:0 0 12px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));max-width:20ch}
.tn2-l p{margin:0;opacity:.75;max-width:40ch;line-height:1.7}
.tn2-l .gbtn{margin-top:22px}
.tn2-l.dark .gbtn{background:var(--bg, #f7f7fa);color:var(--ink, #16182b)}
@media(max-width:767px){.tn2-l.dark{clip-path:circle(0% at 50% 8%)}}

HTML

<div class="tn2">
  <div class="tn2-pin">
    <div class="tn2-l light"><div><h2>ביום זה נראה ככה</h2><p>אתר רגיל, מסודר, כמו כולם.</p><button class="gbtn">להתחיל</button></div></div>
    <div class="tn2-l dark"><div><h2>ובלילה זה מקבל אופי</h2><p>אותו תוכן, ערכה אחרת, ותחושה אחרת לגמרי.</p><button class="gbtn">להתחיל</button></div></div>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const dark=document.querySelector(".tn2-l.dark");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(dark,{clipPath:"circle(150% at 50% 50%)"});return;}
  const mob=matchMedia("(max-width:767px)").matches,at=mob?"50% 8%":"88% 12%";
  gsap.fromTo(dark,{clipPath:"circle(0% at "+at+")"},{clipPath:"circle(150% at "+at+")",ease:"power2.in",scrollTrigger:{trigger:".tn2",start:"top top",end:"bottom bottom",scrub:.5}});
})();