Сквозь форму (проникание)

Экран виден только сквозь силуэт молнии; скролл раскрывает форму до полного «пролёта внутрь».

Скрольте медленно сквозь сцену.

вы прошли сквозь молнию

Код

<section class="shape-scene" data-scrub>  <!-- 300vh -->
  <div class="stick">
    <img class="photo" src="photo.jpg">
    <svg class="overlay" viewBox="0 0 100 100"
         preserveAspectRatio="xMidYMid slice">
      <!-- заливка с ДЫРКОЙ: внешний прямоугольник с огромным
           запасом + форма внутри, fill-rule="evenodd" -->
      <path fill="#db3c8a" fill-rule="evenodd"
        d="M-450,-450H550V550H-450Z
           M57,22 L27,58 L44,58 L21,96 L45,68 L52,68 L40,92 L76,48 L56,48 L70,22 Z"/>
    </svg>
  </div>
</section>

<style>
.shape-scene { position: relative; height: 300vh; }
.shape-scene .stick { position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: #db3c8a; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%;
  --k: clamp(0, var(--p, 0), 1);
  /* квадратичный ход: медленный старт, мощный финал */
  transform: scale(calc(1 + var(--k) * var(--k) * 44));
  transform-origin: 47% 46%;      /* центр формы, не экрана */
  will-change: transform; }
</style>

Промпт для ИИ

Сделай «проникание в экран» сквозь форму (механика agencefoudre.com): sticky-сцена 300vh; фото на весь экран; поверх — SVG-оверлей c fill-rule=evenodd: внешний прямоугольник с огромным запасом (координаты от -450 до 550 при viewBox 100) и внутри — силуэт формы (молния/логотип), который становится дыркой. Контент виден только сквозь форму. Оверлей масштабируется от прогресса скролла: scale(1 + k²·44) — квадратичный ход даёт медленный вход и мощный финал, к концу дырка больше экрана и ты «внутри». transform-origin — в центр формы. Подпись проявляется на p>0.72. Форму рисуй свою, под бренд.