Компоненты/Кинопараллакс

Кинопараллакс

29 сентября 2026

Страница документального фильма: обложка уезжает с параллаксом, а кадр под рваной SVG-маской сжимается при прокрутке, пока картинка внутри него увеличивается.

Установка

npm install clsx motion tailwind-merge
pnpm add clsx motion tailwind-merge
yarn add clsx motion tailwind-merge
bun add clsx motion tailwind-merge

Файлы

cinematic-parallax.tsx
НазадКинокарусельДалееКруглый лоадер

Страница документального фильма в журнальной вёрстке. Обложка под тёмным градиентом при прокрутке отстаёт от страницы с параллаксом, ниже идут жанр, крупное название между тонкими линейками и кнопка со стрелкой.

Кадр с трейлером обрезан рваной SVG-маской: пока вы прокручиваете, сам кадр сжимается, а картинка внутри него увеличивается, создавая эффект наезда камеры. Внизу — крупные заголовки между линейками и карта сайта, пункты которой проявляются при наведении.

Вручную

Скопируйте эти файлы в components/cinematic-parallax/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { CinematicParallax } from "@/components/cinematic-parallax/cinematic-parallax";

export function FilmPage() {
return (
  <div className="h-dvh">
    <CinematicParallax image="/photos/film.webp" title="МОЙ ПРОЕКТ X" kicker="ДОКУМЕНТАЛЬНОЕ КИНО" playKicker="МОТОР" />
  </div>
);
}

Пропсы

Пропс
Описание
image

Картинка обложки и кадра

Тип string

backLabel?

Подпись ссылки назад

Тип string·По умолчанию "All work"

kicker?

Жанр над названием

Тип string·По умолчанию "DOCUMENTARY"

title?

Название фильма

Тип string·По умолчанию "MY PROJECT X"

playKicker?

Надпись над заголовком трейлера

Тип string·По умолчанию "ACTION"

playTitle?

Две строки заголовка трейлера

Тип [string, string]·По умолчанию ["watch", "trailer"]

headlines?

Крупные заголовки между линейками

Тип string[]·По умолчанию ["Production", "documentary", "film tv"]

sitemapLabel?

Подпись карты сайта

Тип string·По умолчанию "sitemap"

sitemap?

Пункты карты сайта

Тип string[]·По умолчанию ["work", "about", "contact", "privacy"]

parallax?

Насколько отстаёт обложка при прокрутке, в процентах

Тип number·По умолчанию 30

frameScale?

Масштаб, до которого сжимается кадр

Тип number·По умолчанию 0.7

imageZoom?

Увеличение картинки внутри кадра

Тип number·По умолчанию 1.3

background?

Цвет страницы

Тип string·По умолчанию "#F9F7EF"

accent?

Цвет кнопки трейлера

Тип string·По умолчанию цвет бренда

className?

Классы прокручиваемого контейнера

Тип string