Как сделать блочный скролл на сайте?

мой стек: next.js, tailwind css.

к примеру у меня есть 3 контейнера с h-screen и я хочу чтобы, скролл плавно переключал эти блоки, чтобы активный блок был по центру и нельзя было остановиться между двух блоков. я встречал на сайтах такую реализацию и мне очень интересно как это сделано. я нашёл только способ при помощи css но там плавность перехода вроде никак не регулируется и получается очень резко.

также встречал какие способы при помощи lenis, но у меня они не заработали. может быть проблема была в том что у меня fixed div, который надо скроллить в нём ещё несколько div включая div с классом container и только после него идёт контент который нужно скролить.

но как я не пытался с lenis у меня ничего не получилось.

пример моей разметки:

<div className="m-0 bg-zinc-900 fixed h-full w-full flex justify-center overflow-y-auto overscroll-y-contain touch-pan-y snap-y snap-mandatory scroll-smooth">
  <div className="container">
    <div className="flex flex-col items-center">
      <main>
        <section id="g1" className="w-full h-screen snap-start snap-always pt-8">
          <Header />
          <MovieCarousel />
        </section>
        <section id="g2" className="h-screen snap-start snap-always pt-8">
          <FilmsWindow />
        </section>
      </main>
    </div>
  </div>
</div>

примерно вот так: Источник - это мой набросок написанный на css с использованием snap-start, но здесь всё очень резко, но хочется чтобы это было с плавной красивой глазу анимацией.