Прокручиваешь страницу, камера приближается к предмету, рядом появляется текст и кнопка. Такой кинематографический экран можно собрать без моделирования: Higgsfield готовит кадр и видео, Codex связывает кадры с прокруткой.
Пройдем весь путь на странице керамической мастерской: выберем сцену, получим исходники, соберем локальный прототип и проверим телефон. Для свободного вращения предмета есть отдельная ветка с настоящей 3D-сценой.
Используете Claude? Есть отдельная инструкция для Claude.
Что получится
Страница, на которой движение сцены зависит от прокрутки. Например, камера приближается к товару, а рядом появляются заголовок и кнопка.
В этой инструкции эффект объема создается последовательностью кадров из видео. Для него не нужна полноценная 3D-модель. Настоящий 3D нужен, если посетитель должен самостоятельно вращать объект или менять ракурс.
Что понадобится
- Codex с доступом к локальной папке и запуску команд.
- Node.js для инструментов проекта; если его нет, ассистент поможет с установкой.
- Аккаунт Higgsfield с активной платной подпиской и кредитами для генераций.
- Одна идея сайта, образец понравившегося дизайна и материалы проекта.
Инструкция бесплатная. Доступ к AI-инструментам и генерации оплачиваются отдельно по их условиям.
Сквозной пример: страница керамической мастерской
Главное действие посетителя: посмотреть ближайшие занятия. Главная сцена: керамическая чашка на деревянном столе у окна. Камера медленно приближается, справа остается место для заголовка «Сделай свою первую чашку». Следом идут обычные разделы с форматом занятия, работами и записью.
Подготовь свою фотографию чашки, логотип и текст. Если фото нет, можно начать с вымышленного предмета как учебного прототипа, но не выдавать его за реальную работу мастерской. Надписи и кнопку оставь HTML-элементами: так они читаются и меняются отдельно от генераций.
Работаем в Codex, проект локальный. Собираем прототип страницы керамической мастерской.
Сцена: чашка на деревянном столе у окна, плавное приближение камеры. Справа нужен свободный фон под заголовок и кнопку «Посмотреть занятия».
Структура: главный экран, формат занятия, примеры работ, запись. Условия и URL записи возьми из моих материалов, неизвестное оставь заполнителем.
Покажи план и список необходимых файлов. Сначала сделаем статичный рабочий экран, затем добавим кадры видео. Не запускай платные генерации без выбранных параметров и моего подтверждения.Сохраняй фото, выбранный кадр и видео отдельно, например в assets/source, assets/generated и папку веб-ресурсов проекта. Не заставляй агента повторять генерацию, если нужно только заменить текст кнопки.
1. Откройте папку проекта
Откройте Codex в приложении для компьютера и добавьте локальный проект с папкой будущего сайта. Начните чат в этом проекте: Codex должен видеть его файлы и иметь возможность запускать команды. Если используете Codex CLI, откройте терминал в папке проекта и запустите codex. Как устроены локальные проекты.
Назовите папку, например, my-cinematic-site. Если переделываете существующий сайт, работайте с его копией и передайте исходные файлы дизайна.
2. Подключите Higgsfield
Для Codex используем CLI и навыки Higgsfield. CLI - программа для запуска команд, а навыки - инструкции, которые помогают агенту работать с ней. Вставьте запрос:
Подключи 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, выбрав Codex и установку для этого проекта, если установщик предлагает такой вариант.
Проверь, что CLI доступна и авторизация прошла. Генерации пока не запускай.Вход в аккаунт выполняете вы. Отдельный API-ключ для этого способа подключения не нужен. Генерации расходуют кредиты Higgsfield. Документация CLI и навыков.
3. Задайте идею и стиль
Заполните поля и отправьте запрос:
Хочу сделать сайт с кинематографической сценой при прокрутке.
Проект: [ЧТО ЭТО ЗА ПРОЕКТ].
Для кого: [АУДИТОРИЯ].
Главное действие посетителя: [НАПРИМЕР, ПОСМОТРЕТЬ РАБОТЫ ИЛИ ОСТАВИТЬ ЗАЯВКУ].
Образец дизайна: [ССЫЛКА ИЛИ СКРИНШОТ].
Что в нем нравится: [ЦВЕТА, ШРИФТЫ, КОМПОЗИЦИЯ, ДВИЖЕНИЕ].
Мои исходники: [ПАПКА С ЛОГОТИПОМ, ФОТОГРАФИЯМИ И ТЕКСТОМ].
Предложи одну главную сцену: что видим в начале, как движется камера и на чем заканчиваем. Отдельно предложи структуру страницы и текст первого экрана.
Если я передал существующий сайт, возьми реальные CSS, шрифты и компоненты из его файлов.
Сначала покажи план. Генерации и разработку начнем после выбора сцены.Для первой попытки подойдет простая сцена: один товар, один интерьер или один объект. Если одновременно движутся камера, предметы и фон, добиться ровного перехода сложнее.
4. Создайте исходное изображение и видео
Сначала добейтесь подходящего неподвижного кадра. Затем используйте его как основу для видео.
Сделай через Higgsfield исходное изображение для выбранной сцены.
Объект: [ОПИСАНИЕ]. Окружение: [ОПИСАНИЕ]. Свет и настроение: [ОПИСАНИЕ].
Оставь место под заголовок и кнопку [ГДЕ ИМЕННО]. Без надписей внутри картинки.
Предложи композицию и доступную модель. Покажи стоимость, если инструмент ее сообщает, и дождись моего подтверждения перед генерацией.
Сохрани выбранный результат в проект.Используй выбранный кадр для видео через Higgsfield.
Движение: [НАПРИМЕР, МЕДЛЕННОЕ ПРИБЛИЖЕНИЕ К ОБЪЕКТУ].
Камера движется плавно, без склеек и внезапной смены сцены. Сам объект сохраняет форму.
Целевая длительность около 5 секунд, если модель ее поддерживает.
Перед генерацией покажи промпт, модель, параметры и стоимость, если она доступна. Дождись подтверждения. Сохрани готовое видео в папку проекта.Посмотрите ролик целиком. Если форма товара меняется или камера дергается, исправьте исходное движение до сборки сайта. Текст и кнопки будем добавлять кодом, чтобы они оставались четкими.
5. Свяжите движение с прокруткой
Собери локальный прототип сайта на основе выбранного дизайна и видео.
Разбей видео на оптимизированные кадры подходящим инструментом. Если нужен FFmpeg, сначала проверь, установлен ли он, и предложи способ установки для моей системы.
Свяжи номер кадра с прогрессом прокрутки в главном разделе. При прокрутке назад движение тоже идет назад. Отрисовка - через canvas, с учетом размеров экрана.
Сначала показывай статичный кадр, затем подгружай последовательность. Не загружай все тяжелые кадры одновременно без необходимости.
Добавь заголовок и кнопку отдельными HTML-элементами поверх сцены. Текст должен оставаться читаемым на всех этапах движения.
На телефоне используй подходящее кадрирование и облегченную последовательность либо статичную версию. Для prefers-reduced-motion показывай неподвижный кадр.
Остальные разделы сделай обычными: описание проекта, примеры, контакты.
Запусти локальный просмотр и покажи адрес страницы.Откройте страницу и прокрутите ее в обе стороны. Оцените, удобно ли читать текст и находить кнопку. Если приходится ждать анимацию ради доступа к информации, сократите сцену.
Если хочется настоящий 3D
Видео подходит для заранее выбранного движения камеры. Если посетитель должен сам вращать товар, менять материал или выбирать ракурс, нужна интерактивная 3D-сцена. Ее тоже можно собрать с ассистентом, например на Three.js. Higgsfield пригодится для поиска визуального стиля, но видео не заменяет вращаемую модель.
Хочу настоящий 3D для [МОЙ ПРОЕКТ]: посетитель должен [ВРАЩАТЬ ОБЪЕКТ / МЕНЯТЬ МАТЕРИАЛ / ДРУГОЕ ДЕЙСТВИЕ].
Образец: [ССЫЛКА НА ПОНРАВИВШИЙСЯ ПРИМЕР].
Изучи проект и предложи реализацию на Three.js или React Three Fiber. Объясни, какая 3D-модель нужна и какие исходники уже есть. Если модели нет, сначала согласуй со мной, где ее взять или как сделать простой прототип.
Собери сцену, управление мышью и пальцем, освещение и движение при прокрутке там, где оно нужно. Проверь результат в браузере. Добавь облегченную или неподвижную версию для телефонов и отключенной анимации.
Не выдавай последовательность кадров из видео за интерактивную 3D-модель.6. Проверьте и подготовьте к публикации
Проверь сайт в браузере на компьютере и телефоне.
Проверь движение вперед и назад, первый показ сцены, читаемость текста, кнопки и отсутствие горизонтальной прокрутки.
Посмотри объем загружаемых кадров и предложи уменьшение, если загрузка тяжелая. Проверь неподвижную версию при отключенной анимации.
Исправь найденные проблемы. Собери проект и подготовь короткую инструкцию запуска и публикации. До моего подтверждения сайт не публикуй.Перед размещением замените временные тексты и ссылки своими. Сохраните исходный кадр, видео и код: тогда сможете дорабатывать сайт без повторения всех генераций.
Если что-то не получается, передайте ассистенту конкретный симптом: «при обратной прокрутке кадры перескакивают» или «на телефоне заголовок закрывает товар». Так проще найти причину, чем по просьбе «сделай красивее».
Сохраните правила проекта
Когда дизайн вас устраивает, попросите сохранить его правила в AGENTS.md. Тогда при добавлении страницы можно опираться на уже выбранные шрифты, цвета, компоненты и движение.
Сохрани утвержденные правила сайта в AGENTS.md в корне проекта. Если файл есть, дополни его, сохранив остальные инструкции.
Укажи реальные файлы CSS, шрифты, цвета, компоненты, исходники сцены и правила для телефона. Запиши, как запускать просмотр, собирать и проверять проект. Сохрани решения, которые мы уже утвердили, и покажи мне инструкции.Посмотрите, какой сайт можно сделать
Эти примеры помогают выбрать композицию и характер движения. Смотри на один прием за раз: фокус, свет, путь камеры или связь сцены с текстом. Для собственной страницы используй свои материалы и пройди практические шаги выше.
1. DOORS: вход через портал
На фоне крупного белого текста находится ярко-синий дверной проем. Прокрутка приближает зрителя к светящемуся проходу. У страницы сразу появляется направление и причина двигаться дальше.
Возьмите за основу: один сильный фокус, ясное движение камеры вперед и типографику, вписанную в композицию.
Адаптируйте: для отеля пройдите через вход к виду из окна. Для студии - через абстрактный портал к выбранным проектам. Используйте собственную сцену и айдентику.
2. PeachWeb: целый визуальный мир
В начальной сцене показаны сюрреалистичная рыба, отражающие формы и пастельный пейзаж; поверх сцены размещены предложение и кнопки. Сам PeachWeb - конструктор сайтов WebGL, поэтому рассматривайте его как вдохновение, а не как еще один обязательный для этого руководства инструмент.
Возьмите за основу: цельное пространство, выразительную палитру и читаемый текст внутри иммерсивной сцены.
Адаптируйте: постройте один мир вокруг своего объекта. Товар для ухода за кожей может находиться в мягком минеральном пейзаже. Для ресторана подойдут теплый свет и крупный план сервировки.
3. Conoid: абстрактный технологичный образ
Пурпурная проволочная форма создает глубину за выразительной, лаконичной типографикой. Сцена поддерживает единое настроение, а страница постепенно раскрывает идею и ее особенности. На эту демонстрацию ведет ссылка с DOORS.
Возьмите за основу: один абстрактный мотив, повторяющийся во всем проекте, и достаточно сдержанный стиль, чтобы сохранить читаемость сообщения.
Адаптируйте: для идеи программного продукта используйте контролируемый поток частиц или скульптурный объект, символизирующий продукт. Не заполняйте страницу несвязанными футуристическими эффектами.
4. Uma Jewellers: главный герой - продукт
В этом примере важны композиция и освещение.
Золотое кольцо на темном теплом фоне появляется на первом экране рядом с крупной журнальной типографикой. Затем страница переходит к коллекциям и мастерству изготовления. Создатель описывает главный экран как кольцо в WebGL, отображаемое в реальном времени.
Возьмите за основу: освещение товара, свободное пространство и переход от зрелищного первого экрана к полезным разделам магазина.
Адаптируйте: поместите в сцену настоящий товар, сохранив точность материала, формы и пропорций. Сгенерированное движение камеры может создать похожее кинематографическое впечатление, но не станет интерактивным конфигуратором товара.
5. The Cosmos Within: прокрутка как путешествие
Темное звездное небо, светящиеся частицы и поэтапно появляющийся текст создают ощущение путешествия в космосе. Автор описывает сцену Three.js с заданными точками камеры, управляемыми прокруткой.
Возьмите за основу: последовательность с началом, серединой и пунктом назначения, а не один эффект, который бесконечно повторяется.
Адаптируйте: используйте путешествие, чтобы рассказать о процессе, исследовать место или представить вымышленный мир. Каждый фрагмент текста должен быть достаточно коротким, чтобы его можно было прочитать без борьбы с движением.
Как найти причину рывков и тяжелой загрузки
Сначала проверь исходное видео отдельно. Если движение уже дергается в нем, код прокрутки это не исправит. Если видео плавное, а страница нет, проверь номера кадров, их загрузку и связь с прогрессом раздела.
Проверь сцену по этапам. 1) Исходное видео: есть ли рывок или смена формы. 2) Кадры: порядок, пропуски, размеры. 3) Прокрутка: первый и последний кадр, движение назад. 4) Загрузка: время первого видимого кадра и объем ресурсов.
Для каждого найденного дефекта назови этап и минимальную правку. Не запускай новые генерации для исправления путей или логики canvas. После исправления проверь медленную и быструю прокрутку, изменение ширины окна и статичную версию с reduced motion.В прототипе можно начать с пятисекундного видео и 12 кадров в секунду: получится около 60 кадров. Это отправная точка, а не обещание плавности на любом телефоне. Если движение слишком заметно прыгает, подбери частоту и сжатие по реальной проверке, сохранив первый статичный кадр.
Перед выпуском проверь, что запись доступна без ожидания конца сцены. Кинематографический экран должен помогать показать мастерскую, а не мешать найти занятия.