G98 · אריחים שמתהפכים בגל בגלילה

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)}

/* G98 · אריחים שמתהפכים בגל בגלילה */
.fw{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin-inline:auto;perspective:1000px;padding-block:10vh 30vh}
.fw-tile{position:relative;aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.fw-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;font-weight:800;color:#fff;font-size:20px}
.fw-back{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);transform:rotateY(180deg);font-size:14px;opacity:.9}
.fw-front.ph{border-radius:14px}
@media(max-width:767px){.fw{grid-template-columns:repeat(2,1fr)}}

HTML

<div class="stage tight"><div class="fw">
  <div class="fw-tile"><div class="fw-face fw-front ph ph-a"><span class="ph-l">1</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-b"><span class="ph-l">2</span></div><div class="fw-face fw-back">·</div></div>
  <div class="fw-tile"><div class="fw-face fw-front ph ph-c"><span class="ph-l">3</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-d"><span class="ph-l">4</span></div><div class="fw-face fw-back">·</div></div>
  <div class="fw-tile"><div class="fw-face fw-front ph ph-e"><span class="ph-l">5</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-a"><span class="ph-l">6</span></div><div class="fw-face fw-back">·</div></div>
  <div class="fw-tile"><div class="fw-face fw-front ph ph-b"><span class="ph-l">7</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-c"><span class="ph-l">8</span></div><div class="fw-face fw-back">·</div></div>
  <div class="fw-tile"><div class="fw-face fw-front ph ph-d"><span class="ph-l">9</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-e"><span class="ph-l">10</span></div><div class="fw-face fw-back">·</div></div>
  <div class="fw-tile"><div class="fw-face fw-front ph ph-a"><span class="ph-l">11</span></div><div class="fw-face fw-back">·</div></div><div class="fw-tile"><div class="fw-face fw-front ph ph-b"><span class="ph-l">12</span></div><div class="fw-face fw-back">·</div></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const tiles=gsap.utils.toArray(".fw-tile");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const cols=matchMedia("(max-width:767px)").matches?2:4;
  gsap.set(tiles,{rotateY:180});
  gsap.to(tiles,{rotateY:0,ease:"power2.inOut",duration:1,
    stagger:{grid:[Math.ceil(tiles.length/cols),cols],from:"start",axis:null,amount:1.4},   // גל אלכסוני מהפינה הראשונה (ימין למעלה ב-RTL)
    scrollTrigger:{trigger:".fw",start:"top 75%",end:"bottom 60%",scrub:.6}});
})();