G119 · אייקון שמתגלגל לאייקון הבא

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}

/* G119 · אייקון שמתגלגל לאייקון הבא */
.mi{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));align-items:start;max-width:1000px;margin-inline:auto}
.mi-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.mi-ic{width:min(260px,50vw);aspect-ratio:1;border-radius:32px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);display:grid;place-items:center;box-shadow:0 30px 70px rgba(0,0,0,.1)}
.mi-ic svg{width:56%;height:56%;overflow:visible}
.mi-ic path{fill:none;stroke:var(--accent, #4a3aff);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mi-steps{display:flex;flex-direction:column;gap:42vh;padding-block:36vh}
.mi-step b{display:block;font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.14em;margin-bottom:8px}
.mi-step h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,36px)}
.mi-step p{margin:0;color:var(--muted, #6a6d85);line-height:1.7;max-width:36ch}
@media(max-width:767px){.mi{grid-template-columns:1fr}.mi-pin{height:40vh;top:0;z-index:2;background:var(--bg, #f7f7fa)}.mi-ic{width:min(36vw,160px);border-radius:22px}.mi-steps{gap:26vh;padding-block:6vh 30vh}}

HTML

<div class="stage tight"><div class="mi">
  <div class="mi-pin"><div class="mi-ic"><svg viewBox="0 0 100 100" aria-hidden="true">
    <path class="mi-shape" d="M50 10 C72 10 90 28 90 50 C90 72 72 90 50 90 C28 90 10 72 10 50 C10 28 28 10 50 10 Z"/>
    <path class="mi-b" style="display:none" d="M15 50 C30 50 45 50 60 50 C68 50 74 50 82 50 C74 42 66 34 58 26 C66 34 74 42 82 50 C74 58 66 66 58 74 C66 66 74 58 82 50 Z"/>
    <path class="mi-c" style="display:none" d="M14 52 C20 58 26 64 32 70 C38 76 42 78 46 74 C56 62 66 50 76 38 C82 31 86 27 86 27 C86 27 82 31 76 38 C66 50 56 62 46 74 C42 78 38 76 32 70 C26 64 20 58 14 52 Z"/>
    <path class="mi-d" style="display:none" d="M50 8 C55 24 60 34 62 36 C68 37 80 38 90 40 C82 47 74 54 68 60 C70 70 72 80 74 90 C64 84 56 80 50 76 C44 80 36 84 26 90 C28 80 30 70 32 60 C26 54 18 47 10 40 C20 38 32 37 38 36 C40 34 45 24 50 8 Z"/>
  </svg></div></div>
  <div class="mi-steps">
    <div class="mi-step"><b>01</b><h3>פנייה</h3><p>טופס קצר או שיחה. אנחנו חוזרים תוך יום עסקים.</p></div>
    <div class="mi-step"><b>02</b><h3>כיוון</h3><p>שיחת אפיון שמסמנת לאן הולכים ומה לא עושים.</p></div>
    <div class="mi-step"><b>03</b><h3>ביצוע</h3><p>עיצוב, בנייה, ובדיקות. שבועיים בממוצע.</p></div>
    <div class="mi-step"><b>04</b><h3>תוצאה</h3><p>אתר באוויר, ומדידה מהיום הראשון.</p></div>
  </div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

(function(){
  const shape=document.querySelector(".mi-shape"),steps=gsap.utils.toArray(".mi-step"),targets=[".mi-shape",".mi-b",".mi-c",".mi-d"];
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  const base=shape.getAttribute("d");
  let cur=0;
  function go(k){if(k===cur)return;cur=k;
    const to=k===0?base:targets[k];
    gsap.to(shape,{morphSVG:to,duration:reduce?0:.9,ease:"power3.inOut",overwrite:true});
  }
  steps.forEach((s,i)=>ScrollTrigger.create({trigger:s,start:"top 60%",end:"bottom 40%",onEnter:()=>go(i),onEnterBack:()=>go(i)}));
})();