Кино-эффект на сайте - это не 3D-анимация и не дорогой Webflow. Это AI-видео из Higgsfield: облёт камеры, дым, драматичный свет. Claude Code собирает вокруг него сайт за вечер. Даю промпт на видео и стартовый промпт для кода.

Когда видишь лендинг с видео-фоном, где камера облетает объект, дым расходится, свет бьёт под углом - кажется, что там стоит бюджет продакшена. На деле это 5-минутная генерация в Higgsfield и несколько часов в Claude Code.

Покажу как.

Что такое Higgsfield

Higgsfield - платформа для генерации коротких кинематографических видео с контролем камеры. Ты задаёшь сцену текстом, выбираешь движение камеры (облёт, наезд, отъезд, вращение) и получаешь 4-6 секунд видео с нужным настроением.

Из готовых движений камеры для лендинга лучше всего работают:

Для фона сайта нужно зацикленное видео без резких переходов. Arc Shot и Crane Shot дают плавное движение, которое хорошо зацикливается.

Промпт под видео-героя

Заходи на higgsfield.ai, создай новый проект. В поле промпта вставь и адаптируй под свою тему:

code
Cinematic arc shot slowly orbiting a [объект/продукт/локация].
Dramatic volumetric lighting, rays of light breaking through smoke.
Dark background with deep shadows. Anamorphic lens flare.
Slow motion, 24fps film grain. Atmospheric haze.
Color grade: teal and orange. Photorealistic, 8K quality.

Подстановки:

💡

Совет

Генерируй 3-4 варианта и выбирай тот, где движение камеры самое плавное. Резкий разворот камеры в конце клипа разрушит зацикливание. Нужно чтобы начало и конец клипа визуально совпадали.

После генерации скачай видео в MP4. Оптимальный размер для веба - 1080p, до 15 MB.

Стартовый промпт для Claude Code

Открой новый проект в Claude Code, помести видео в папку /public/hero.mp4 и отдай этот промпт:

code
Создай кинематографичный лендинг с AI-видео-героем.

Стек: Next.js 14 (app router), Tailwind CSS, тёмная тема (#050505 фон).
Шрифт: Onest (Google Fonts). Акцентный цвет: #E8D5B7 (тёплый кремовый).

Структура страницы:

1. Hero-секция на весь экран:
   - Видео /public/hero.mp4 как фон (autoplay, loop, muted, playsInline)
   - Тёмный оверлей поверх видео (opacity 0.5)
   - По центру: заголовок H1, подзаголовок, кнопка CTA
   - Видео прокручивается вместе со скроллом (parallax: при скролле вниз видео движется медленнее текста, скорость 0.5)

2. Секция-описание (тёмный фон, белый текст):
   - 3 карточки с иконками (выбери минималистичные SVG-иконки)
   - Каждая карточка: иконка, заголовок, 1-2 предложения

3. CTA-секция:
   - Большой заголовок по центру
   - Кнопка
   - Тонкая линия-разделитель сверху

Требования к деталям:
- Hero-видео занимает 100vh при загрузке
- Кнопка CTA: светлая с тёмным текстом, hover-эффект с лёгким свечением
- Плавные появления секций при скролле (Intersection Observer, fade-in снизу вверх)
- Все тексты - плейсхолдеры, заменю потом
ℹ️

Заметка

Parallax на видео - это CSS transform translateY на обёртке видео через JavaScript при scroll-событии. Claude Code напишет это сам, не нужно объяснять механику. Просто скажи "parallax со скоростью 0.5" - он поймёт.

Добавить скролл-привязку видео

После того как базовый лендинг собран, можно добавить более сложный эффект: видео проматывается вместе со скроллом страницы. Чем дальше скроллишь - тем дальше прогресс видео.

code
Добавь scroll-controlled playback для hero-видео.

Логика:
- Видео pauseable (убери autoplay)
- При скролле вычисляй прогресс: (scrollY / windowHeight) ограниченный от 0 до 1
- Устанавливай video.currentTime = progress * video.duration
- Эффект: видео "разматывается" по мере скролла
- Добавь CSS: video { object-fit: cover; width: 100%; height: 100%; }
- Hero-секция: min-height: 200vh (чтобы было место для скролла внутри секции)
- При выходе из hero - видео останавливается на последнем кадре как статичный фон
💡

Совет

Этот эффект работает лучше всего с Arc Shot видео - облёт вокруг объекта становится интерактивным. Скроллишь вниз - камера облетает. Создаёт ощущение контроля над анимацией.

Финальные штрихи

После того как каркас работает, два промпта под детали:

Типографика и пространство:

code
Улучши типографику лендинга:
- H1: 72px на десктопе, 40px на мобильном, font-weight 700, letter-spacing -0.02em
- Подзаголовок: 20px, font-weight 400, opacity 0.75, max-width 540px, text-align center
- Кнопка CTA: padding 16px 40px, border-radius 4px, font-size 16px, font-weight 600
- Добавь микро-анимацию на кнопку: scale(1.02) при hover, transition 200ms ease

Оптимизация видео под веб:

code
Добавь оптимизацию загрузки видео:
- Добавь poster="/hero-poster.jpg" на тег video (статичный первый кадр)
- preload="auto"
- Оберни в компонент с Suspense
- Добавь резервный фон на случай если видео не загрузилось: linear-gradient(135deg, #1a1a2e, #16213e)

Главное

Весь стек: Higgsfield (5 мин на видео) + Claude Code (2-4 часа на лендинг) + Next.js + Tailwind. Результат выглядит как работа продакшен-команды. Себестоимость: подписка Higgsfield ~$20 и твоё время.

Способ быстрее: отдай эту статью своему Claude

Скопируй ссылку на эту страницу, открой Claude Code и напиши:

"Прочитай эту статью и собери мне такой лендинг по инструкции: https://nextgenclub.ru/blog/kinolanding"

Claude Code сходит по ссылке, разберёт шаги, попросит загрузить видео из Higgsfield и соберёт лендинг. Тебе останется подставить свои тексты.

Стартовый промпт из статьи - скопируй и передай в Claude Code: --- Создай кинематографичный лендинг с AI-видео-героем. Стек: Next.js 14 (app router), Tailwind CSS, тёмная тема (#050505 фон). Шрифт: Onest (Google Fonts). Акцентный цвет: #E8D5B7 (тёплый кремовый). Структура: Hero на весь экран с видео /public/hero.mp4 как фон (autoplay, loop, muted, playsInline), тёмный оверлей (opacity 0.5), по центру заголовок H1 + подзаголовок + кнопка CTA. Parallax на видео при скролле (скорость 0.5). Секция из 3 карточек с иконками. CTA-секция с большим заголовком и кнопкой. Плавные появления секций при скролле через Intersection Observer. --- После генерации добавляй scroll-controlled playback по промпту из статьи.

Больше про Claude и AI-инструменты в работе - в моём Telegram-канале Виктор Дачников | NEXTGEN.

Частые вопросы

Сколько стоит собрать такой лендинг?
Подписка Higgsfield около 20 долларов в месяц плюс твоё время. Само видео генерируется 5 минут, лендинг в Claude Code собирается за 2-4 часа. Дизайнер и Webflow не нужны.
Какое движение камеры выбрать для фона сайта?
Arc Shot (облёт вокруг объекта) и Crane Shot (подъём сверху) дают плавное движение, которое хорошо зацикливается. Dolly Zoom создаёт напряжение, но для фона подходит хуже. Главное правило: начало и конец клипа должны визуально совпадать, иначе на стыке будет рывок.
Почему видео дёргается на повторе?
Скорее всего в конце клипа резкий разворот камеры, и зацикливание разрушается. Генерируй 3-4 варианта и бери тот, где движение самое плавное.
Какой размер видео нужен для веба?
1080p и до 15 МБ. Плюс обязательно добавь poster с первым кадром и preload, иначе пользователь увидит пустой чёрный экран, пока видео грузится.
Нужно ли уметь программировать?
Нет. Весь код пишет Claude Code по промптам из статьи. Даже сложные вещи вроде parallax или проматывания видео по скроллу не нужно объяснять на уровне механики: достаточно сказать «parallax со скоростью 0.5», и он поймёт.

NextGen Club

Собираешь сайты через Claude Code?

Показываю как делаю кинематографичные лендинги за вечер - в Telegram-канале.

Вступить в клуб