Плавный скролл (Lenis)
4wide + studiox + lightship Параллакс слоёв →

База

Плавный скролл (Lenis)

Инерционная прокрутка — фундамент всех остальных эффектов. Единственная библиотека, которую стоит взять.

Вся библиотека уже едет на нём.

Эта страница (и вся библиотека) скроллится через Lenis: колесо даёт инерцию и доводку. Именно на этой базе строятся все «дорогие» сайты — без плавного скролла параллаксы дёргаются.

Код
<!-- вариант 1: CDN -->
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
<script>
if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
  var lenis = new Lenis({ lerp: 0.11 });
  function raf(t) { lenis.raf(t); requestAnimationFrame(raf); }
  requestAnimationFrame(raf);
}
</script>

<!-- вариант 2: npm -->
// npm i lenis
import Lenis from "lenis";
const lenis = new Lenis({ lerp: 0.11 });
function raf(t) { lenis.raf(t); requestAnimationFrame(raf); }
requestAnimationFrame(raf);

<!-- внутренним скролл-зонам (модалки, панели): -->
<div class="panel" data-lenis-prevent>...</div>

/* CSS: чтобы не спорил с нативным smooth */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
Промпт для ИИ
Подключи плавный инерционный скролл через Lenis (как у 4wide.jp, thisisstudiox.com, lightshiprv.com): npm i lenis или CDN; new Lenis({lerp: 0.11}) + прокачка requestAnimationFrame(t => lenis.raf(t)). Внутренним скролл-контейнерам — атрибут data-lenis-prevent. CSS: .lenis.lenis-smooth{scroll-behavior:auto!important}. Не инициализируй при prefers-reduced-motion. Все скролл-эффекты сайта сразу станут плавнее.