G97 · קו סריקה שהופך שלד לצבע

CSS

/* G97 · קו סריקה שהופך שלד לצבע */
.sc{position:relative;height:220vh}
.sc-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sc-frame{position:relative;width:min(760px,90vw);aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);box-shadow:0 30px 70px rgba(0,0,0,.12)}
.sc-ui{position:absolute;inset:0;padding:22px;display:grid;grid-template-columns:1fr 2fr;gap:14px}
.sc-ui i{display:block;border-radius:10px}
.sc-side{display:grid;gap:10px;align-content:start}
.sc-side i{height:14px;background:var(--line, #e4e4ee)}
.sc-side i:first-child{height:34px;background:var(--accent, #4a3aff)}
.sc-main{display:grid;grid-template-rows:auto 1fr;gap:12px}
.sc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sc-kpis i{height:56px;background:var(--bg, #f7f7fa);border:1px solid var(--line, #e4e4ee)}
.sc-chart{border:1px solid var(--line, #e4e4ee);border-radius:12px;background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--accent, #4a3aff) 20%,transparent));position:relative}
.sc-chart::after{content:"";position:absolute;inset:auto 10% 20% 10%;height:3px;background:var(--accent, #4a3aff);border-radius:3px}
.sc-wire{filter:grayscale(1) contrast(.5);opacity:.55}
.sc-wire i,.sc-wire .sc-chart{background:transparent!important;border:1.5px dashed var(--muted, #6a6d85)!important}
.sc-wire .sc-chart::after{background:var(--muted, #6a6d85)}
.sc-color{clip-path:inset(0 0 100% 0);will-change:clip-path}
.sc-line{position:absolute;inset-inline:0;top:0;height:2px;background:var(--accent, #4a3aff);box-shadow:0 0 18px var(--accent, #4a3aff);will-change:transform}
.sc-cap{position:absolute;bottom:26px;font-size:13px;color:var(--muted, #6a6d85)}
@media(max-width:767px){.sc-frame{aspect-ratio:4/5}.sc-ui{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sc-kpis i{height:40px}}

HTML

<div class="sc">
  <div class="sc-pin"><div class="sc-frame">
    <div class="sc-ui sc-wire"><div class="sc-side"><i></i><i></i><i></i><i></i><i></i></div><div class="sc-main"><div class="sc-kpis"><i></i><i></i><i></i></div><div class="sc-chart"></div></div></div>
    <div class="sc-ui sc-color"><div class="sc-side"><i></i><i></i><i></i><i></i><i></i></div><div class="sc-main"><div class="sc-kpis"><i></i><i></i><i></i></div><div class="sc-chart"></div></div></div>
    <div class="sc-line"></div>
  </div><p class="sc-cap">גלול כדי לסרוק</p></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const frame=document.querySelector(".sc-frame"),color=document.querySelector(".sc-color"),line=document.querySelector(".sc-line");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(color,{clipPath:"inset(0 0 0% 0)"});gsap.set(line,{opacity:0});return;}
  gsap.timeline({scrollTrigger:{trigger:".sc",start:"top top",end:"bottom bottom",scrub:.5,invalidateOnRefresh:true}})
    .fromTo(color,{clipPath:"inset(0 0 100% 0)"},{clipPath:"inset(0 0 0% 0)",ease:"none",duration:1},0)
    .fromTo(line,{y:0},{y:()=>frame.clientHeight,ease:"none",duration:1},0)
    .to(line,{opacity:0,duration:.05},.96)
    .to(".sc-cap",{opacity:0,duration:.1},0);
})();