Shape Reveal

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

<UkShapeReveal
  before={<section className="h-full">...</section>}
  image="/sea.jpg"
  shape={<img src="/logo.svg" alt="" />}
>
  <h2>...</h2>
  <p>...</p>
</UkShapeReveal>

שכבה לבנה ב-mix-blend-mode: screen נשארת לבנה, ואיפה שיש בה שחור רואים את מה שמתחתיה. הלוגו הופך לשחור ב-CSS, אז הצבעים שלו לא משנים.

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

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