Заливка цветом

Фото приклеено, а цветная волна поднимается поверх него по мере прокрутки — фото «заливается цветом».

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

цвет накрывает фото волной

Код

<!-- фото приклеено, цвет накрывает его волной (jobyaviation.com) -->
<section class="fill-scene">  <!-- высота 230vh -->
  <div class="stick">
    <img class="photo" src="photo.jpg">
    <div class="wave"><h2>Текст на цвете</h2></div>
  </div>
</section>

<style>
.fill-scene { position: relative; height: 230vh; --p: 0; }
.stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.photo { width: 100%; height: 100%; object-fit: cover; }
.wave { position: absolute; inset: 0; background: #E84B16;
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(calc((1 - clamp(0, calc(var(--p) / .85), 1)) * 100%) 0 0 0); }
.wave h2 { color: #fff;
  opacity: clamp(0, calc((var(--p) - .55) / .25), 1); }
</style>

<!-- JS тот же, что в «Раскрытии-окне»: пишет --p с доводкой -->

Промпт для ИИ

Сделай заливку фото цветом при скролле как на jobyaviation.com: секция 230vh, внутри sticky-экран с фотографией на весь размер. Поверх — слой фирменного цвета, спрятанный снизу через clip-path: inset(100% 0 0 0). JS пишет прогресс секции в CSS-переменную --p (0..1, лерп 0.1); слой раскрывается clip-path: inset(calc((1 - p/0.85)*100%) 0 0 0) — цвет волной поднимается и накрывает фото. Заголовок на цвете проявляется с p 0.55. Убедись, что у предков sticky-элемента нет overflow:hidden. При prefers-reduced-motion заливку не показывай.