Прокручиваешь страницу, камера приближается к предмету, рядом появляется текст и кнопка. Такой кинематографический экран можно собрать без моделирования: Higgsfield готовит кадр и видео, Claude Code связывает кадры с прокруткой. Пройдем весь путь на странице керамической мастерской: выберем сцену, получим исходники, соберем локальный прототип и проверим телефон. Для свободного вращения предмета есть отдельная ветка с настоящей 3D-сценой. Используете Codex? Есть [отдельная инструкция для Codex](/resources/codex-cinematic-websites-higgsfield/). ## Что получится Страница, на которой движение сцены зависит от прокрутки. Например, камера приближается к товару, а рядом появляются заголовок и кнопка. В этой инструкции эффект объема создается последовательностью кадров из видео. Для него не нужна полноценная 3D-модель. Настоящий 3D нужен, если посетитель должен самостоятельно вращать объект или менять ракурс. ## Что понадобится - Claude Code с доступом к локальной папке и запуску команд. - Node.js для инструментов проекта; если его нет, ассистент поможет с установкой. - Аккаунт Higgsfield с активной платной подпиской и кредитами для генераций. - Одна идея сайта, образец понравившегося дизайна и материалы проекта. Инструкция бесплатная. Доступ к AI-инструментам и генерации оплачиваются отдельно по их условиям. ## Сквозной пример: страница керамической мастерской Главное действие посетителя: посмотреть ближайшие занятия. Главная сцена: керамическая чашка на деревянном столе у окна. Камера медленно приближается, справа остается место для заголовка «Сделай свою первую чашку». Следом идут обычные разделы с форматом занятия, работами и записью. Подготовь свою фотографию чашки, логотип и текст. Если фото нет, можно начать с вымышленного предмета как учебного прототипа, но не выдавать его за реальную работу мастерской. Надписи и кнопку оставь HTML-элементами: так они читаются и меняются отдельно от генераций. ```prompt Работаем в Claude Code, проект локальный. Собираем прототип страницы керамической мастерской. Сцена: чашка на деревянном столе у окна, плавное приближение камеры. Справа нужен свободный фон под заголовок и кнопку «Посмотреть занятия». Структура: главный экран, формат занятия, примеры работ, запись. Условия и URL записи возьми из моих материалов, неизвестное оставь заполнителем. Покажи план и список необходимых файлов. Сначала сделаем статичный рабочий экран, затем добавим кадры видео. Не запускай платные генерации без выбранных параметров и моего подтверждения. ``` Сохраняй фото, выбранный кадр и видео отдельно, например в `assets/source`, `assets/generated` и папку веб-ресурсов проекта. Не заставляй агента повторять генерацию, если нужно только заменить текст кнопки. ## 1. Откройте папку проекта Установите [Claude Code](https://code.claude.com/docs/en/setup) и откройте терминал в папке будущего сайта. Запустите `claude`. Если используете Code в приложении Claude Desktop, выберите локальную папку проекта. Нужен доступ к чтению файлов, их изменению и запуску команд. Назовите папку, например, `my-cinematic-site`. Если переделываете существующий сайт, работайте с его копией и передайте исходные файлы дизайна. ## 2. Подключите Higgsfield Для Claude Code используем CLI и навыки Higgsfield. CLI - программа для запуска команд, а навыки - инструкции, которые помогают агенту работать с ней. Вставьте запрос: ```prompt Подключи Higgsfield к этому проекту по официальной инструкции: https://higgsfield.ai/creator-hub/help-center/integrations/how-do-i-connect-higgsfield-to-ai-agent Проверь наличие Node.js. Установи CLI командой npm i -g @higgsfield/cli. Запусти higgsfield auth login и дай мне пройти вход в браузере. Добавь навыки через npx skills add higgsfield-ai/skills, выбрав Claude Code и установку для этого проекта, если установщик предлагает такой вариант. Проверь, что CLI доступна и авторизация прошла. Генерации пока не запускай. ``` Вход в аккаунт выполняете вы. Отдельный API-ключ для этого способа подключения не нужен. Генерации расходуют кредиты Higgsfield. [Документация CLI и навыков](https://higgsfield.ai/creator-hub/help-center/integrations/how-do-i-access-higgsfield-via-cli). ## 3. Задайте идею и стиль Заполните поля и отправьте запрос: ```prompt Хочу сделать сайт с кинематографической сценой при прокрутке. Проект: [ЧТО ЭТО ЗА ПРОЕКТ]. Для кого: [АУДИТОРИЯ]. Главное действие посетителя: [НАПРИМЕР, ПОСМОТРЕТЬ РАБОТЫ ИЛИ ОСТАВИТЬ ЗАЯВКУ]. Образец дизайна: [ССЫЛКА ИЛИ СКРИНШОТ]. Что в нем нравится: [ЦВЕТА, ШРИФТЫ, КОМПОЗИЦИЯ, ДВИЖЕНИЕ]. Мои исходники: [ПАПКА С ЛОГОТИПОМ, ФОТОГРАФИЯМИ И ТЕКСТОМ]. Предложи одну главную сцену: что видим в начале, как движется камера и на чем заканчиваем. Отдельно предложи структуру страницы и текст первого экрана. Если я передал существующий сайт, возьми реальные CSS, шрифты и компоненты из его файлов. Сначала покажи план. Генерации и разработку начнем после выбора сцены. ``` Для первой попытки подойдет простая сцена: один товар, один интерьер или один объект. Если одновременно движутся камера, предметы и фон, добиться ровного перехода сложнее. ## 4. Создайте исходное изображение и видео Сначала добейтесь подходящего неподвижного кадра. Затем используйте его как основу для видео. ```prompt Сделай через Higgsfield исходное изображение для выбранной сцены. Объект: [ОПИСАНИЕ]. Окружение: [ОПИСАНИЕ]. Свет и настроение: [ОПИСАНИЕ]. Оставь место под заголовок и кнопку [ГДЕ ИМЕННО]. Без надписей внутри картинки. Предложи композицию и доступную модель. Покажи стоимость, если инструмент ее сообщает, и дождись моего подтверждения перед генерацией. Сохрани выбранный результат в проект. ``` ```prompt Используй выбранный кадр для видео через Higgsfield. Движение: [НАПРИМЕР, МЕДЛЕННОЕ ПРИБЛИЖЕНИЕ К ОБЪЕКТУ]. Камера движется плавно, без склеек и внезапной смены сцены. Сам объект сохраняет форму. Целевая длительность около 5 секунд, если модель ее поддерживает. Перед генерацией покажи промпт, модель, параметры и стоимость, если она доступна. Дождись подтверждения. Сохрани готовое видео в папку проекта. ``` Посмотрите ролик целиком. Если форма товара меняется или камера дергается, исправьте исходное движение до сборки сайта. Текст и кнопки будем добавлять кодом, чтобы они оставались четкими. ## 5. Свяжите движение с прокруткой ```prompt Собери локальный прототип сайта на основе выбранного дизайна и видео. Разбей видео на оптимизированные кадры подходящим инструментом. Если нужен FFmpeg, сначала проверь, установлен ли он, и предложи способ установки для моей системы. Свяжи номер кадра с прогрессом прокрутки в главном разделе. При прокрутке назад движение тоже идет назад. Отрисовка - через canvas, с учетом размеров экрана. Сначала показывай статичный кадр, затем подгружай последовательность. Не загружай все тяжелые кадры одновременно без необходимости. Добавь заголовок и кнопку отдельными HTML-элементами поверх сцены. Текст должен оставаться читаемым на всех этапах движения. На телефоне используй подходящее кадрирование и облегченную последовательность либо статичную версию. Для prefers-reduced-motion показывай неподвижный кадр. Остальные разделы сделай обычными: описание проекта, примеры, контакты. Запусти локальный просмотр и покажи адрес страницы. ``` Откройте страницу и прокрутите ее в обе стороны. Оцените, удобно ли читать текст и находить кнопку. Если приходится ждать анимацию ради доступа к информации, сократите сцену. ## Если хочется настоящий 3D Видео подходит для заранее выбранного движения камеры. Если посетитель должен сам вращать товар, менять материал или выбирать ракурс, нужна интерактивная 3D-сцена. Ее тоже можно собрать с ассистентом, например на Three.js. Higgsfield пригодится для поиска визуального стиля, но видео не заменяет вращаемую модель. ```prompt Хочу настоящий 3D для [МОЙ ПРОЕКТ]: посетитель должен [ВРАЩАТЬ ОБЪЕКТ / МЕНЯТЬ МАТЕРИАЛ / ДРУГОЕ ДЕЙСТВИЕ]. Образец: [ССЫЛКА НА ПОНРАВИВШИЙСЯ ПРИМЕР]. Изучи проект и предложи реализацию на Three.js или React Three Fiber. Объясни, какая 3D-модель нужна и какие исходники уже есть. Если модели нет, сначала согласуй со мной, где ее взять или как сделать простой прототип. Собери сцену, управление мышью и пальцем, освещение и движение при прокрутке там, где оно нужно. Проверь результат в браузере. Добавь облегченную или неподвижную версию для телефонов и отключенной анимации. Не выдавай последовательность кадров из видео за интерактивную 3D-модель. ``` ## 6. Проверьте и подготовьте к публикации ```prompt Проверь сайт в браузере на компьютере и телефоне. Проверь движение вперед и назад, первый показ сцены, читаемость текста, кнопки и отсутствие горизонтальной прокрутки. Посмотри объем загружаемых кадров и предложи уменьшение, если загрузка тяжелая. Проверь неподвижную версию при отключенной анимации. Исправь найденные проблемы. Собери проект и подготовь короткую инструкцию запуска и публикации. До моего подтверждения сайт не публикуй. ``` Перед размещением замените временные тексты и ссылки своими. Сохраните исходный кадр, видео и код: тогда сможете дорабатывать сайт без повторения всех генераций. Если что-то не получается, передайте ассистенту конкретный симптом: «при обратной прокрутке кадры перескакивают» или «на телефоне заголовок закрывает товар». Так проще найти причину, чем по просьбе «сделай красивее». ## Сохраните правила проекта Когда дизайн вас устраивает, попросите сохранить его правила в CLAUDE.md. Тогда при добавлении страницы можно опираться на уже выбранные шрифты, цвета, компоненты и движение. ```prompt Сохрани утвержденные правила сайта в CLAUDE.md в корне проекта. Если файл есть, дополни его, сохранив остальные инструкции. Укажи реальные файлы CSS, шрифты, цвета, компоненты, исходники сцены и правила для телефона. Запиши, как запускать просмотр, собирать и проверять проект. Сохрани решения, которые мы уже утвердили, и покажи мне инструкции. ``` ## Посмотрите, какой сайт можно сделать Эти примеры помогают выбрать композицию и характер движения. Смотри на один прием за раз: фокус, свет, путь камеры или связь сцены с текстом. Для собственной страницы используй свои материалы и пройди практические шаги выше. ### 1. DOORS: вход через портал ![Пример сайта: doors](/images/resources/examples/doors-20261007.webp) [Открыть DOORS](https://doors-io.vercel.app/) На фоне крупного белого текста находится ярко-синий дверной проем. Прокрутка приближает зрителя к светящемуся проходу. У страницы сразу появляется направление и причина двигаться дальше. **Возьмите за основу:** один сильный фокус, ясное движение камеры вперед и типографику, вписанную в композицию. **Адаптируйте:** для отеля пройдите через вход к виду из окна. Для студии - через абстрактный портал к выбранным проектам. Используйте собственную сцену и айдентику. ### 2. PeachWeb: целый визуальный мир ![Пример сайта: peachweb](/images/resources/examples/peachweb-20261007.webp) [Открыть PeachWeb](https://peachweb.io/) В начальной сцене показаны сюрреалистичная рыба, отражающие формы и пастельный пейзаж; поверх сцены размещены предложение и кнопки. Сам PeachWeb - конструктор сайтов WebGL, поэтому рассматривайте его как вдохновение, а не как еще один обязательный для этого руководства инструмент. **Возьмите за основу:** цельное пространство, выразительную палитру и читаемый текст внутри иммерсивной сцены. **Адаптируйте:** постройте один мир вокруг своего объекта. Товар для ухода за кожей может находиться в мягком минеральном пейзаже. Для ресторана подойдут теплый свет и крупный план сервировки. ### 3. Conoid: абстрактный технологичный образ ![Пример сайта: conoid](/images/resources/examples/conoid-20261007.webp) [Открыть Conoid](https://conoid-demo.vercel.app/) Пурпурная проволочная форма создает глубину за выразительной, лаконичной типографикой. Сцена поддерживает единое настроение, а страница постепенно раскрывает идею и ее особенности. На эту демонстрацию ведет ссылка с DOORS. **Возьмите за основу:** один абстрактный мотив, повторяющийся во всем проекте, и достаточно сдержанный стиль, чтобы сохранить читаемость сообщения. **Адаптируйте:** для идеи программного продукта используйте контролируемый поток частиц или скульптурный объект, символизирующий продукт. Не заполняйте страницу несвязанными футуристическими эффектами. ### 4. Uma Jewellers: главный герой - продукт В этом примере важны композиция и освещение. Золотое кольцо на темном теплом фоне появляется на первом экране рядом с крупной журнальной типографикой. Затем страница переходит к коллекциям и мастерству изготовления. Создатель описывает главный экран как кольцо в WebGL, отображаемое в реальном времени. **Возьмите за основу:** освещение товара, свободное пространство и переход от зрелищного первого экрана к полезным разделам магазина. **Адаптируйте:** поместите в сцену настоящий товар, сохранив точность материала, формы и пропорций. Сгенерированное движение камеры может создать похожее кинематографическое впечатление, но не станет интерактивным конфигуратором товара. ### 5. The Cosmos Within: прокрутка как путешествие ![Пример сайта: cosmos](/images/resources/examples/cosmos-20261007.webp) [Открыть The Cosmos Within](https://3-d-hackathon-2.vercel.app/) Темное звездное небо, светящиеся частицы и поэтапно появляющийся текст создают ощущение путешествия в космосе. Автор описывает сцену Three.js с заданными точками камеры, управляемыми прокруткой. **Возьмите за основу:** последовательность с началом, серединой и пунктом назначения, а не один эффект, который бесконечно повторяется. **Адаптируйте:** используйте путешествие, чтобы рассказать о процессе, исследовать место или представить вымышленный мир. Каждый фрагмент текста должен быть достаточно коротким, чтобы его можно было прочитать без борьбы с движением. ## Как найти причину рывков и тяжелой загрузки Сначала проверь исходное видео отдельно. Если движение уже дергается в нем, код прокрутки это не исправит. Если видео плавное, а страница нет, проверь номера кадров, их загрузку и связь с прогрессом раздела. ```prompt Проверь сцену по этапам. 1) Исходное видео: есть ли рывок или смена формы. 2) Кадры: порядок, пропуски, размеры. 3) Прокрутка: первый и последний кадр, движение назад. 4) Загрузка: время первого видимого кадра и объем ресурсов. Для каждого найденного дефекта назови этап и минимальную правку. Не запускай новые генерации для исправления путей или логики canvas. После исправления проверь медленную и быструю прокрутку, изменение ширины окна и статичную версию с reduced motion. ``` В прототипе можно начать с пятисекундного видео и 12 кадров в секунду: получится около 60 кадров. Это отправная точка, а не обещание плавности на любом телефоне. Если движение слишком заметно прыгает, подбери частоту и сжатие по реальной проверке, сохранив первый статичный кадр. Перед выпуском проверь, что запись доступна без ожидания конца сцены. Кинематографический экран должен помогать показать мастерскую, а не мешать найти занятия. Если хочешь собрать первый фрагмент такого сайта и понять, как управлять агентом, можно прийти на [личное занятие](https://fakeseniordev.ru/lessons/). Ты сам работаешь в своем проекте, я объясняю и помогаю разобраться. 50 минут, 7 500 ₽. Возьми исходники и одну посильную задачу для начала.