G76 · סמן-תווית שמשתנה לפי האלמנט

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}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G76 · סמן-תווית שמשתנה לפי האלמנט */
.lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px))}
.lc-item{position:relative;aspect-ratio:4/3;border-radius:var(--r, 14px);overflow:hidden;cursor:none}
.lc-item .ph{position:absolute;inset:0;border-radius:0;font-size:22px}
.lc-tag{position:absolute;bottom:12px;inset-inline-start:12px;background:var(--ink, #16182b);color:var(--bg, #f7f7fa);font-size:12px;padding:6px 12px;border-radius:999px;display:none}
.lc-cur{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);pointer-events:none;z-index:99;
  display:grid;place-items:center;font-size:13px;font-weight:600;translate:-50% -50%;opacity:0;white-space:nowrap}
@media (hover:none){.lc-item{cursor:default}.lc-tag{display:inline-block}.lc-cur{display:none}}
@media (max-width:767px){.lc-grid{grid-template-columns:1fr 1fr}}

HTML

<div class="stage tight"><div class="lc-grid">
  <a class="lc-item" href="#" data-cursor="צפייה"><div class="ph ph-a"><span class="ph-l">1</span></div><span class="lc-tag">צפייה</span></a>
  <a class="lc-item" href="#" data-cursor="פתיחה"><div class="ph ph-b"><span class="ph-l">2</span></div><span class="lc-tag">פתיחה</span></a>
  <a class="lc-item" href="#" data-cursor="צפייה"><div class="ph ph-c"><span class="ph-l">3</span></div><span class="lc-tag">צפייה</span></a>
  <a class="lc-item" href="#" data-cursor="גרירה"><div class="ph ph-d"><span class="ph-l">4</span></div><span class="lc-tag">גרירה</span></a>
  <a class="lc-item" href="#" data-cursor="צפייה"><div class="ph ph-e"><span class="ph-l">5</span></div><span class="lc-tag">צפייה</span></a>
  <a class="lc-item" href="#" data-cursor="פתיחה"><div class="ph ph-a"><span class="ph-l">6</span></div><span class="lc-tag">פתיחה</span></a>
</div></div>

JS

(function(){
  if(!matchMedia("(hover:hover) and (pointer:fine)").matches)return;
  const cur=document.createElement("div");cur.className="lc-cur";document.body.appendChild(cur);
  const x=gsap.quickTo(cur,"x",{duration:.25,ease:"power3.out"}),y=gsap.quickTo(cur,"y",{duration:.25,ease:"power3.out"});
  let shown=false;
  document.addEventListener("mousemove",e=>{x(e.clientX);y(e.clientY);if(!shown){shown=true;gsap.to(cur,{opacity:1,duration:.3});}});
  document.querySelectorAll("[data-cursor]").forEach(el=>{
    el.addEventListener("mouseenter",()=>{cur.textContent=el.dataset.cursor;gsap.to(cur,{width:84,height:84,duration:.35,ease:"power3.out"});});
    el.addEventListener("mouseleave",()=>{cur.textContent="";gsap.to(cur,{width:14,height:14,duration:.35,ease:"power3.out"});});
  });
})();