Разрушаем вместо создания: как мы сжали горы контента и разработали логотип из камня

Всем привет, это снова команда Chipsa! Мы выходим на финишную прямую в рассказе о том, как менялся наш сайт. Ранее вы уже узнали, какие смыслы заложены в проект и какую дизайнерскую концепцию мы воплотили. На очереди — последний, но от этого не менее важный аспект: техническая реализация. Возможно, он не столь «громкий» и «скандальный», как предыдущие, но, поверьте, здесь тоже было место впечатляющим находкам и неожиданным вызовам. Расскажем о наших решениях в области оптимизации и о том, через какие тернии приходилось пробиваться.

Несмотря на множество задумок, оставленных «на потом», техническая реализация оказалась насыщенной и непростой. Проект вышел крутым и нетривиальным: трое фронтенд-разработчиков работали над ним, приложив массу усилий. Основной стек: Next.js (React) и React-three-fiber (Three.js).

Давайте подробнее остановимся на самых интересных из этих задач.

Наш сайт содержит огромное количество тяжёлых видеороликов, которые нужно было загрузить так, чтобы пользователи не ощущали лагов. Для этого мы рассмотрели несколько подходов:

Для оптимизации использовали ffmpeg — универсальный инструмент для работы с видео. Приведём несколько примеров команд:

Генерация HEVC:

ffmpeg -i input.mp4 -c:v libx265 -crf 30 -vf scale=1920:-2 -tag:v hvc1 -movflags faststart output-opt.hevc.mp4

Генерация AV1:

ffmpeg -i input.mp4 -c:v libsvtav1 -crf 40 -movflags faststart -vf scale=1920:-2 output-opt.av1.mp4

Оптимизация MP4:

ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -crf 20 -vf scale=1920:-2 -movflags +faststart output-opt.mp4

В результате мы «сжали» видео без заметной потери качества. Теперь ролики на сайте загружаются быстро и работают без лагов.

После множества экспериментов с материалом для нашей «чипсинки» мы остановились на камне. Но на этом идеи не закончились — захотелось добавить интерактивный эффект при наведении курсора. Концепция была такая: логотип распадается на части, а затем собирается обратно.

Для создания эффекта использовали Three.js и модель в формате GLB. Анимации распада и сборки логотипа дизайнер подготовил в Blender, а мы воспроизвели их на фронтенде с помощью THREE.AnimationMixer.

Чтобы вычислить воздействие курсора, применили базовые векторные расчёты в JavaScript. Теперь эффект работает и на сенсорных устройствах. Качественное освещение обеспечили картами нормалей и картами окружения, которые усилили реализм.

Одним из самых сложных элементов были карточки кейсов с эффектом плавного переливания изображения и изменением размеров при скролле. Наша задача заключалась в том, чтобы создать шейдерный ховер-эффект, при котором изображение на карточке менялось плавно, а её размеры изменялись в зависимости от скорости прокрутки страницы.

Мы снова обратились к WebGL. Canvas растянули на весь экран, спрятали HTML-элементы с изображениями и видео, а вместо них использовали PlaneGeometry. Затем подогнали их размер под оригинальные HTML-элементы и синхронизировали позиции при прокрутке страницы.

Мы поделились лишь самыми яркими моментами этого проекта, но в реальности там было гораздо больше сложностей и интересных решений. Этот рассказ — лишь иллюстрация нашего подхода к работе. Мы любим искать креативные решения, и такие задачи — наш идеальный вызов.

Главное, что наш сайт действительно удался. Он стал мощным опытом и для нас, и для наших клиентов. А самое важное — он нравится всем, кто с ним работает.

Подписывайтесь на наш телеграм-канал, чтобы быть в курсе последних новостей и увидеть ещё больше интересных кейсов нашей студии!