Видели сайты, где скроллишь вниз и кадр за кадром разворачивается сюжет? Мы собрали пару таких проектов через AI вместо дорогого продакшна. Делюсь процессом 🙂
Сначала о выборе подхода. Такой эффект можно сделать на 3D в браузере, но для обычного сайта это слишком тяжело и дорого. 3D оправдан на промо-проектах, где сам эффект – часть продукта. Для большинства сайтов оптимальна и легче секвенция. Кстати Apple использует этот подход в своих скролл-анимациях (например, страница AirPods)
Порядок такой:
1. Генерим стартовый кадр. Делаем несколько вариантов, выбираем лучший.
2. Черновое видео в 720p. На этом разрешении гоняем анимацию хоть 10 раз, пока не получим нужное движение. Смотрим клип целиком, раскадровку и стоп-кадр в конце.
3. Финальный рендер в 4K. Запускаем только тогда, когда движение утверждено.
Две ловушки
1. Докрутить 720p до 4K через апскейлер дешевле, но сетка неизбежно перерисует мелкие детали. Если в кадре есть интерфейсы, мониторы или надписи — только нативный 4K, иначе получите рандомный набор букв.
2. Сюжет должен быть из трех актов: было → переход → стало. Если объект просто распадается и превращается во что-то другое, это воспринимается как исчезновение. Поэтому важно показать, как новый образ собирается до конца.
Готовый видосик режем на кадры:
— Частота: 15 fps
— Размер: ширина 2560px, формат строго WebP (сильно экономит вес)
— Финал: дублируем последний кадр 3–5 раз в конец, чтобы анимация плавно залипала, а не дергалась.
— Итого: 15 сек видео превращаются в ~230 кадров.
Отдельно про мобильные. Десктопную секвенцию переносить нельзя: она слишком тяжелая и плохо кадрируется. Лучше сгенерировать отдельную вертикальную версию – она легче и собирается по тому же пайплайну.
В итоге первый экран студийного уровня можно собрать за вечер-два вместо съемочной смены. Но чтобы вышло качественно, следуйте советам из этого постика 😎
Если хотите, отдельно разберем, как собрать сам scroll-scrub. Ставьте 🔥
Сначала о выборе подхода. Такой эффект можно сделать на 3D в браузере, но для обычного сайта это слишком тяжело и дорого. 3D оправдан на промо-проектах, где сам эффект – часть продукта. Для большинства сайтов оптимальна и легче секвенция. Кстати Apple использует этот подход в своих скролл-анимациях (например, страница AirPods)
Итак, кадры и видео генерируем в Higgsfield. Главное правило: дешево тестируем, дорого рендерим только после аппрува.
Порядок такой:
1. Генерим стартовый кадр. Делаем несколько вариантов, выбираем лучший.
2. Черновое видео в 720p. На этом разрешении гоняем анимацию хоть 10 раз, пока не получим нужное движение. Смотрим клип целиком, раскадровку и стоп-кадр в конце.
3. Финальный рендер в 4K. Запускаем только тогда, когда движение утверждено.
Это сильно экономит бюджет: 15 сек в 720p стоят ~50 кредитов, а в 4K уже ~330. Если искать идею сразу в 4K, бюджет сгорит на 3-ей попытке.
Две ловушки
1. Докрутить 720p до 4K через апскейлер дешевле, но сетка неизбежно перерисует мелкие детали. Если в кадре есть интерфейсы, мониторы или надписи — только нативный 4K, иначе получите рандомный набор букв.
2. Сюжет должен быть из трех актов: было → переход → стало. Если объект просто распадается и превращается во что-то другое, это воспринимается как исчезновение. Поэтому важно показать, как новый образ собирается до конца.
И не забываем про композицию: объект – максимум 40% высоты кадра, остальное пространство оставляем под заголовок. Картинка «во весь экран» выглядит эффектно, но делает текст нечитабельным.
Готовый видосик режем на кадры:
— Частота: 15 fps
— Размер: ширина 2560px, формат строго WebP (сильно экономит вес)
— Финал: дублируем последний кадр 3–5 раз в конец, чтобы анимация плавно залипала, а не дергалась.
— Итого: 15 сек видео превращаются в ~230 кадров.
Отдельно про мобильные. Десктопную секвенцию переносить нельзя: она слишком тяжелая и плохо кадрируется. Лучше сгенерировать отдельную вертикальную версию – она легче и собирается по тому же пайплайну.
Обязательно сохраняйте ID и сиды всех удачных генераций в отдельную табличку. Без них результаты потом не найти.
В итоге первый экран студийного уровня можно собрать за вечер-два вместо съемочной смены. Но чтобы вышло качественно, следуйте советам из этого постика 😎
Если хотите, отдельно разберем, как собрать сам scroll-scrub. Ставьте 🔥