Страница документального фильма в журнальной вёрстке. Обложка под тёмным градиентом при прокрутке отстаёт от страницы с параллаксом, ниже идут жанр, крупное название между тонкими линейками и кнопка со стрелкой.
Кадр с трейлером обрезан рваной 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