Shape World

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

<UkShapeWorld
  before={<div className="h-full">…</div>}
  world={<img src="/forest.jpg" alt="" />}
  shape="/star.svg"
>
  <article>כרטיס שנגלל מעל היער</article>
  <div className="h-svh" />
</UkShapeWorld>
<section>עולה מעל היער</section>

shape כתובת של תמונה שהחלק האטום שלה הוא הצורה. open אורך הגלילה הריקה (250svh). sizeTo הגודל הסופי ב-vmax (450): צורה עם חור באמצע צריכה יותר. drift התמונה של העולם גדלה לאורך כל הסקשן (1.25), כדי שלא תהיה נקודה מתה עד שהתוכן מגיע. 1 מכבה. --uk-shape-world-origin מאיפה היא נפתחת, בצורה עם רווח: נקודה בתוך הצורה. הסקשן הבא תמיד בגובה מסך לפחות, אחרת התמונה נחשפת מתחתיו, והוא מתחיל מסך אחד לפני סוף הסקשן: התוכן שבפנים גבוה ממסך, או שהוא מכסה אותו.

העולם שוקע לצבע של הסקשן הבא

תמונה בהירה מאחורי כרטיסים, ואז חיתוך לצבע של הסקשן הבא, נראים כמו פריים מוזר. במקום זה התמונה מתכהה מלמטה לאט, לצבע של הסקשן שעולה, מהרגע שהתוכן מגיע. הרכיב כותב את ההתקדמות שלו על העולם, --uk-shape-world-p (0 עד 1), והדף מוסיף שכבה ב-CSS שלו. חי בדיג׳יי ובמוחיטו, בהמלצות.

.dj-floor .uk-shape-world__world::after {
  --sink: clamp(0, (var(--uk-shape-world-p, 0) - 0.25) / 0.45, 1);   /* darkens from below */
  --solid: clamp(0, (var(--uk-shape-world-p, 0) - 0.7) / 0.2, 1);   /* then closes, solid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    var(--next-ground) calc(var(--sink) * 45%),
    color-mix(in oklch, var(--next-ground) calc(72% + var(--solid) * 28%), transparent) calc(var(--sink) * 45% + 35%));
  opacity: var(--sink);
}

בלי שכבה שזזה (translate): הקצה העליון שלה נראה כקו ישר על התמונה. הגרדיאנט עצמו גדל.