G131 · כותרת שמתמלאת בנוזל

כותרת ענקית שהאותיות שלה הן מכל: נוזל צבעוני עולה בתוכן עם הגלילה, עם קו גל על פני השטח, עד שכל המילה צבועה.

מתי משתמשים: כותרת הירו, מספר גדול, שם מותג. פעם אחת בעמוד, על מילה או שתיים.

הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.

קוד להדבקה

הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".

פתח קובץ עצמאי ↗

הצג את הקוד כאן

CSS

/* G131 · כותרת שמתמלאת בנוזל */
.lt{min-height:140vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.lt h2{margin:0;font-size:clamp(56px,14vw,220px);font-weight:900;line-height:1;text-align:center;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink, #16182b) 40%,transparent);
  background:linear-gradient(0deg,var(--accent, #4a3aff) 0 50%,transparent 50% 100%) 0 var(--lvl,0%) / 100% 200% no-repeat;
  -webkit-background-clip:text;background-clip:text}
.lt p{text-align:center;color:var(--muted, #6a6d85);margin:14px 0 0}

HTML

<div class="lt"><div><h2>מלא</h2><p>גלול, והכותרת מתמלאת</p></div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const h=document.querySelector(".lt h2");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){h.style.setProperty("--lvl","100%");return;}
  const o={l:0};
  gsap.to(o,{l:100,ease:"none",scrollTrigger:{trigger:".lt",start:"top 70%",end:"bottom 60%",scrub:.5},onUpdate(){h.style.setProperty("--lvl",o.l+"%");}});
})();