G64 · מדיה שעוברת בין שתי שכבות של הכותרת

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}

/* G64 · מדיה שעוברת בין שתי שכבות של הכותרת */
.sw{height:260vh;position:relative}
.sw-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sw-word{position:absolute;margin:0;font-size:clamp(52px,13vw,190px);font-weight:800;line-height:1;
  letter-spacing:-.02em;text-align:center;white-space:nowrap;color:var(--ink, #16182b)}
.sw-word.back{z-index:1}
/* השכבה הקדמית נחתכת בחציה העליון בלבד, ולכן היא מכסה רק את החלק שהתמונה אמורה להיכנס מאחוריו */
.sw-word.front{z-index:3;clip-path:inset(0 0 52% 0)}
.sw-media{position:relative;z-index:2;width:min(420px,62vw);aspect-ratio:3/4;border-radius:18px;
  font-size:0;will-change:transform;box-shadow:0 30px 70px rgba(20,20,40,.28)}
.sw-cap{position:absolute;bottom:8vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px;z-index:4}

HTML

<div class="sw"><div class="sw-stage">
  <h2 class="sw-word back">סטודיו</h2>
  <div class="ph sw-media ph-b"></div>
  <h2 class="sw-word front">סטודיו</h2>
  <p class="sw-cap">גלול. התמונה נכנסת בין שתי השכבות של המילה.</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const media=document.querySelector(".sw-media");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  gsap.fromTo(media,{yPercent:62,scale:.82},{yPercent:-8,scale:1,ease:"none",
    scrollTrigger:{trigger:".sw",start:"top top",end:"bottom bottom",scrub:.55}});
})();