Интерактив и WebGL
- Стоимость
- от 400 000 ₽
- Срок
- 4–8 недель
- Опыт
- 100+ проектов · 10+ лет · 9+ стран
3D, шейдеры и анимации, которые делают сайт запоминающимся и не тормозят
- WebGL
- Three.js
- Blender
Базовый набор. Под задачу и требования проекта подключаем и другие инструменты.
Иногда сайту нужно не просто рассказать о продукте, а произвести впечатление: живой фон, 3D-объект, реакция на курсор и прокрутку. Мы делаем такие эффекты на WebGL и шейдерах и следим, чтобы они работали плавно даже на слабых устройствах.
Создаём интерактив как для новых сайтов, так и для уже работающих: добавляем WebGL-сцену на главную, анимируем ключевые блоки или делаем отдельную промо-страницу.
Что мы делаем
- WebGL-сцены и 3D-объекты на Three.js
- Собственные шейдеры: частицы, искажения, переходы
- Анимации текста и блоков, связанные с прокруткой
- Плавные переходы между страницами
- Адаптацию качества под мощность устройства
- Запасной вариант для устройств без поддержки WebGL
Что вы получаете
- Сайт, который выделяется среди конкурентов
- Эффекты, которые не мешают скорости загрузки
- Стабильные 60 кадров в секунду на современных устройствах
- Код, который легко поддерживать и настраивать
Зачем сайту интерактив
Продукт нечем показать: он нематериальный или ещё не выпущен
Придумываем визуальную метафору и собираем её в 3D-сцену: данные становятся частицами, процесс — движением объекта при прокрутке. Сцена объясняет, а не просто украшает.
Сделали WebGL, и сайт начал греть телефоны
Ставим бюджет на кадр с первого прототипа и меряем на слабом Android, а не на мощном ноутбуке. Сцена рендерится, только пока видна, и засыпает в неактивной вкладке.
Эффект красивый, а поисковик видит пустую страницу
Текст и разметка остаются обычным HTML поверх канваса, сцена грузится после основного контента. Поисковики и экранные дикторы читают страницу как обычную.
Эффект показали на видео, а в браузере он работает иначе
Прототип эффекта делаем сразу в браузере, а не в After Effects. Вы смотрите его на своих устройствах до того, как мы начинаем разработку страницы.
Интерактив сделали, а менять его может только автор кода
Выносим параметры сцены — цвета, скорость, плотность частиц — в конфиг или CMS. Код документируем, чтобы с ним могла работать ваша команда.
С чем работаем
Впечатление без потерь
Эффект служит идее
Каждая сцена рассказывает что-то о продукте или бренде. Красивое движение без смысла в проект не попадает.Скорость — часть задачи
Сцена загружается после главного контента, а бюджет кадра считаем ещё на этапе прототипа.В расчёте каждое устройство
Проверяем эффект на слабых телефонах и ноутбуках и заранее решаем, что упростить, а что оставить.Текст остаётся главным
Фон не спорит с контентом: заголовки читаются, кнопки нажимаются, а поисковики видят страницу целиком.Свой код вместо шаблонов
Сцены и шейдеры пишем под проект, поэтому эффект не встретится на соседнем сайте.
Кто делает интерактив
Над сценой работают вместе дизайн и разработка: эффект рождается в прототипе, а не в презентации.
Арт-директор
Придумывает идею эффекта, задаёт характер движения и следит, чтобы сцена работала на бренд.Моушн-дизайнер
Раскладывает анимацию по кадрам, подбирает тайминги и кривые, рисует переходы.WebGL-разработчик
Пишет сцену на Three.js и шейдеры, настраивает уровни качества и частоту кадров.Менеджер проекта
Ведёт сроки, показывает прототипы на каждом шаге и собирает обратную связь.
Кому нужен WebGL на сайте
Подойдёт, если
- Продуктовым и технологическим компаниям, чей сайт должен выглядеть на уровне продукта
- Промо-страницам запусков, которые должны запомниться за один визит
- Студиям, брендам и креативным индустриям, для которых сайт — часть портфолио
- Проектам, где 3D объясняет устройство продукта лучше текста
Не подойдёт, если
- Сайт живёт только на заявках из поиска — там важнее структура и скорость, займёмся ускорением сайта
- Нет времени на прототип и итерации — эффект в спешке выйдет сырым, лучше взять лёгкие анимации
Как мы работаем
- 01
Идея
2–4 дняОбсуждаем, какое впечатление должен производить сайт, и собираем референсы.
Итог этапа Подборка референсов и описание сцены и анимаций - 02
Прототип эффекта
1–2 неделиДелаем рабочий черновик сцены, чтобы оценить его вживую, а не по картинкам.
Итог этапа Черновик сцены, который открывается в браузере по ссылке - 03
Разработка
2–4 неделиДоводим сцену и анимации до финала и встраиваем их в сайт.
Итог этапа Сцена и анимации в составе сайта на тестовом сервере - 04
Оптимизация
3–5 днейПрофилируем на разных устройствах и настраиваем уровни качества.
Итог этапа Уровни качества для слабых устройств и запасной вариант без WebGL - 05
Запуск
1 деньПроверяем работу в браузерах и публикуем.
Итог этапа Опубликованный сайт и 3 месяца гарантии на исправление ошибок
Что понадобится для интерактива
- Идея или настроение: референсы сайтов, видео, художников
- Стек сайта, если эффект встраивается в готовый проект
- 3D-модели продукта в исходниках, если они есть
- Целевые устройства: на чём чаще всего смотрит ваша аудитория
- Кто со стороны дизайна и разработки примет работу
Созвон и идея эффекта
За полчаса обсуждаем, что сайт должен передать и где интерактив оправдан. После звонка присылаем концепцию эффекта, план прототипа, сроки и оценку.
Хотите сайт,
который запомнят?
Расскажите идею — соберём прототип эффекта, сделаем его на WebGL и шейдерах и проверим, чтобы он работал плавно даже на слабых устройствах.
Сцена загружается после основного контента и не блокирует первый экран. Качество эффектов автоматически снижается на слабых устройствах, а в фоновой вкладке анимация останавливается.
Да. WebGL-сцену можно встроить в существующий сайт отдельным слоем, не переделывая остальную вёрстку.
Упрощённую версию эффекта или статичное изображение — контент и навигация доступны всем.
Да, подключаем модели из Blender и других редакторов, оптимизируем их вес и настраиваем материалы и свет.
От 400 000 ₽. Итог зависит от сложности сцены: интерактивный фон на шейдерах обходится дешевле, чем сцена с 3D-моделями, переходами между разделами и реакцией на прокрутку. Влияет и число страниц с эффектами. Точную стоимость называем после обсуждения идеи.
