G148 · כתם דיו שמתפשט וחושף

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)}

/* G148 · כתם דיו שמתפשט וחושף */
.ink{position:relative;height:200vh}
.ink-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg, #f7f7fa);display:grid;place-items:center}
.ink-a{position:relative;z-index:1;text-align:center;max-width:30ch;padding:24px}
.ink-a h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.ink-a p{margin:0;color:var(--muted, #6a6d85)}
.ink-b{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:var(--bg, #f7f7fa);background:var(--ink, #16182b);mask:url(#ink-m);-webkit-mask:url(#ink-m);padding:24px}
.ink-b .ph{position:absolute;inset:0;border-radius:0;opacity:.35;font-size:0}
.ink-b div{position:relative;max-width:30ch}
.ink-b h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.ink-b p{margin:0;opacity:.85}
.ink-svg{position:absolute;width:0;height:0}

HTML

<div class="ink">
  <svg class="ink-svg" aria-hidden="true"><defs><mask id="ink-m" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><path class="ink-blob" fill="#fff" d="M.5 .42 C.56 .38 .63 .4 .64 .47 C.65 .53 .6 .58 .54 .59 C.48 .6 .41 .57 .4 .5 C.39 .45 .44 .43 .5 .42 Z"/></mask></defs></svg>
  <div class="ink-pin">
    <div class="ink-a"><h2>לפני הדיו</h2><p>עמוד שקט, ואז משהו מתפשט.</p></div>
    <div class="ink-b"><div class="ph ph-b"></div><div><h2>ומה שנחשף</h2><p>הפרק האמנותי של האתר, בצבעים שלו.</p></div></div>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const blob=document.querySelector(".ink-blob");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(blob,{scale:30,transformOrigin:"50% 50%"});return;}
  const mob=matchMedia("(max-width:767px)").matches;
  gsap.set(blob,{scale:.05,transformOrigin:"50% 50%",x:mob?0:.18,y:mob?0:-.12});   // יחידות objectBoundingBox: 1 = כל המכל
  gsap.timeline({scrollTrigger:{trigger:".ink",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(blob,{scale:30,ease:"power2.in",duration:1});
})();