G08 · סמן מותאם + פנס

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}

/* G08 · סמן מותאם + פנס */
.fzone{position:relative;height:70vh;background:#101223;border-radius:var(--r, 14px);margin-inline:var(--gutter, clamp(24px, 5vw, 96px));overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;color:#fff}
.flash{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#f4c66044,transparent 65%);filter:blur(40px);pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .3s}
.follow{width:22px;height:22px;border-radius:50%;background:#fff /* qa-allow: white, ידית/סמן ולא משטח טקסט */;mix-blend-mode:difference;position:fixed;left:0;top:0;pointer-events:none;z-index:99;opacity:0}
.fzone button{min-height:48px;padding-inline:26px;border-radius:999px;border:1px solid #fff5;background:transparent;color:#fff;font-family:inherit;font-size:15px;cursor:pointer}

HTML

<div class="stage tight"><div class="fzone">
<div class="flash"></div>
<p>הזז את העכבר. שים לב לפנס ולעיגול הסמן</p>
<button>כפתור לבדיקת הסמן</button>
</div></div>

JS

const fz=document.querySelector(".fzone"),fl=document.querySelector(".flash");
const fo=document.createElement("div");fo.className="follow";document.body.appendChild(fo);
let mx=0,my=0,px=0,py=0;
document.addEventListener("mousemove",e=>{mx=e.clientX;my=e.clientY;
  const r=fz.getBoundingClientRect();
  fl.style.left=(e.clientX-r.left)+"px";fl.style.top=(e.clientY-r.top)+"px";});
fz.addEventListener("mouseenter",()=>{fl.style.opacity=1;fo.style.opacity=1});
fz.addEventListener("mouseleave",()=>{fl.style.opacity=0});
gsap.ticker.add(()=>{px+=(mx-px)*.2;py+=(my-py)*.2;gsap.set(fo,{x:px-11,y:py-11})});
document.querySelectorAll("button,a").forEach(t=>{
  t.addEventListener("mouseenter",()=>gsap.to(fo,{scale:2.4,duration:.3,ease:"power2.out"}));
  t.addEventListener("mouseleave",()=>gsap.to(fo,{scale:1,duration:.3,ease:"power2.out"}));
});