JSFiddle - React, Tailwind, and code Playground

HTML

<section>
		<span class="curve">
			<img src="https://wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png">
		</span>
	</section>

CSS

* {
			margin:0;
			padding:0;
		}
		body {
			height:200vh;
			background-color: #111;
		}
		section {
			position:absolute;
			width:100%;
			height:100%;
			background:#ff2;
		}
		section .curve {
			position:absolute;
			bottom:-200px;
			height:200px;
			width:100%;
			transform-origin:top;
		}
		section .curve img{
			width:100%;
			height:100%;
		}

JavaScript

var scroll = document.querySelector ('.curve');
		var factor = scroll.getBoundingClientRect().top;
		var value = 1;

		window.addEventListener ('scroll', whiteCurve);

		function whiteCurve() {
			let scrollProperties = isScrolledIntoView(scroll);

			if(scrollProperties["visible"]) {
				value =  1 - window.scrollY  / factor;

				if(value < 0) {
					value = 0;
				}

				scroll.style.transform = `scaleY(${value})`;
			} else {
				// console.log('no');
			}
		}

		function isScrolledIntoView(el) {
			let rect = el.getBoundingClientRect();
			let elemTop = rect.top;
			let elemBottom = rect.bottom;

			// Only completely visible elements return true:
			//let isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
			// Partially visible elements return true:
			let isVisible = elemTop < window.innerHeight && elemBottom >= 0;
			return {
				"visible" : isVisible,
				"top" : elemTop,
				"bottom" : elemBottom
			};
		}