Clip Expand Scroll

<div class="ces-wrap">
  <div style="height:80vh;"></div>
  <div class="ces-section" id="ces-section">
    <div class="ces-inner">
      <h2>Expand</h2>
      <p>Scroll to reveal the full view</p>
    </div>
  </div>
  <div style="height:120vh;"></div>
</div>

body { padding: 0 !important; }
.ces-wrap { width: 100%; }
.ces-section {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ces-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: circle(5% at 50% 50%);
  transition: clip-path 0.05s;
}
.ces-inner h2 { font-size: 32px; margin: 0 0 8px; }
.ces-inner p { font-size: 14px; opacity: 0.7; margin: 0; }

const section = document.getElementById('ces-section');
const inner = section.querySelector('.ces-inner');
function onScroll() {
  const rect = section.getBoundingClientRect();
  const progress = Math.max(0, Math.min(1, 1 - (rect.top / window.innerHeight)));
  const radius = 5 + progress * 75;
  inner.style.clipPath = 'circle(' + radius + '% at 50% 50%)';
}
window.addEventListener('scroll', onScroll);
onScroll();