G36 · מעבר סקשן בקשת שמתיישרת

הגבול בין סקשן בהיר לכהה הוא קשת עגולה. ככל שגוללים אליו, הקשת מתיישרת לקו ישר. מעבר רך במקום חיתוך, בלי תמונה ובלי clip-path קופצני.

מתי משתמשים: מעבר מהירו לסקשן הבא, כניסה לאזור מחירים או ציטוט. פעם או פעמיים בעמוד. עובד על כל שני צבעי רקע.

הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.

קוד להדבקה

הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".

פתח קובץ עצמאי ↗

הצג את הקוד כאן

CSS

/* G36 · מעבר סקשן בקשת שמתיישרת */
.arc-light{background:var(--card, #fff);padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));text-align:center}
.arc-dark{background:#0f1020;color:#fff;position:relative;padding:0 var(--gutter, clamp(24px, 5vw, 96px)) var(--sec, clamp(120px, 12vw, 260px))}
.arc-svg{display:block;width:100%;height:clamp(60px,14vw,220px)}
.arc-svg path{fill:#fff}
.arc-inner{max-width:720px;margin-inline:auto;padding-top:clamp(40px,5vw,80px);text-align:center}
.arc-card{background:var(--card, #fff);color:var(--ink, #16182b);border-radius:20px;padding:36px 28px;margin-top:32px;display:inline-block;min-width:min(360px,80vw)}
.arc-card b{font-size:clamp(44px,5vw,80px);display:block;line-height:1}

HTML

<section class="arc-light"><h2 style="font-size:var(--fs-demo);margin:0">הכל מתחיל בסקשן בהיר</h2><p style="color:var(--muted)">גלול, ותראה את הקשת מתיישרת בכניסה לסקשן הכהה</p></section>
<section class="arc-dark">
  <svg class="arc-svg" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
    <path id="arcA" d="M0,0 H100 V0 C78,40 22,40 0,0 Z"/>
    <path id="arcB" d="M0,0 H100 V0 C78,0 22,0 0,0 Z" style="display:none"/>
  </svg>
  <div class="arc-inner"><p style="letter-spacing:.14em;font-size:12px;color:#9a9cb8">מחיר אחד, פשוט</p>
  <div class="arc-card"><b>250 ₪</b><span style="color:var(--muted)">לחודש, ללא התחייבות</span></div></div>
</section>

JS

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

gsap.to("#arcA",{morphSVG:"#arcB",ease:"none",
  scrollTrigger:{trigger:".arc-svg",start:"top 95%",end:"top 25%",scrub:1}});