G83 · תג טקסט מעגלי שמסתובב

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}

/* G83 · תג טקסט מעגלי שמסתובב */
.rb-wrap{display:flex;justify-content:center;align-items:center;gap:clamp(30px,6vw,80px);flex-wrap:wrap;padding-block:40px}
.rb{position:relative;width:clamp(140px,18vw,190px);aspect-ratio:1;flex:none}
.rb-ring{position:absolute;inset:0;will-change:transform}
.rb-ring span{position:absolute;left:50%;top:5%;height:45%;translate:-50% 0;transform-origin:50% 100%;font-size:clamp(14px,1.7vw,18px);font-weight:700;color:var(--ink, #16182b);line-height:1}
.rb-core{position:absolute;inset:0;margin:auto;width:44%;height:44%;border-radius:50%;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);display:grid;place-items:center;font-size:22px}
.rb-copy{max-width:30ch}
.rb-copy h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.rb-copy p{margin:0;color:var(--muted, #6a6d85)}

HTML

<div class="stage tight"><div class="rb-wrap">
  <div class="rb" aria-label="גלול למטה"><div class="rb-ring" data-text="גלול למטה · גלול למטה · " aria-hidden="true"></div><span class="rb-core">↓</span></div>
  <div class="rb-copy"><h2>פתוחים לפרויקטים חדשים</h2><p>שני מקומות פנויים לרבעון הקרוב.</p></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  // בלי SVG textPath: כרום לא מסדר טקסט RTL על מסלול, ולכן כל תו מוצב בנפרד סביב המרכז.
  // עברית נקראת מימין לשמאל, ולכן התווים מתקדמים נגד כיוון השעון (זווית יורדת) כדי שיקראו נכון בראש העיגול.
  const ring=document.querySelector(".rb-ring"),chars=[...ring.dataset.text],step=360/chars.length;
  chars.forEach((ch,i)=>{const s=document.createElement("span");s.textContent=ch===" "?" ":ch;s.style.transform="rotate("+(-i*step)+"deg)";ring.appendChild(s);});
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const spin=gsap.to(ring,{rotate:-360,duration:14,ease:"none",repeat:-1});
  // גלילה מאיצה זמנית: מהירות הגלילה ממופה ל-timeScale וחוזרת ל-1
  ScrollTrigger.create({onUpdate:s=>{gsap.to(spin,{timeScale:1+Math.min(4,Math.abs(s.getVelocity())/400),duration:.2,overwrite:true,onComplete(){gsap.to(spin,{timeScale:1,duration:1.2});}});}});
})();