Карьера Б3
Рассказываем о реализации весьма непростого лендинга «Карьера Б3». Пару лет назад для нашего основного сайта мы разработали страницу «Б3-хантинг» — в принципе тоже не очень простую: в ней 3 реалтайм-сцены, WebGL-приложение фотогалереи, несколько единиц фронтендмоушеновых штук, и самое интересное — все это собрано в Webflow. Отталкиваясь от уровня реализации текущей версии, вторая версия должна была стать технологически минимум на полтора апдейта сильнее.
Основная фишка лендинга — наше кастомное веб-приложение videopoints — визуализация частиц, использующая специальный формат видео, полученный с помощью нейросетей, генерирующих глубину по картинке. Из статического «плоского» видео, мы легким движением руки получаем псевдообъемную, а главное — интерактивную сцену.
Поверх системы частиц отрабатывает приложение визуализации морфинга надписей: при смене слов символы визуально мягко анимируются в символы из следующего слова. Для этого мы разработали приложение-конструктор: в нем всё это можно настраивать и даже задавать визуальные компенсации отступов с помощью корректировки кернинговых пар.
Для основной части лендинга мы разработали несколько WebGL-приложений разного рода визуализаций..
- Videoapp — интерактивную видеосферу из всех наших работ в портфеле дизайн-проектов.
- Приложение визуализации системы частиц: полностью настраиваемое, с режимом слежения за курсором, либо с автономной активностью для тач-устройств.
- Приложение визуализации лент с текстами поверх них: также полностью настраиваемое, с довольно неожиданными сайд-эффектами геометрии лент и интересной реализацией материала.
- И последнее из реалтаймовых приложений — классический «живой"-бэкграунд и приложение-конструктор к нему. В лендинге это приложение в фоне первой секции после интро из частиц.
Вообще мы довольно много работаем над уровнем и качеством моушена в браузере, поэтому каждый новый проект — с новыми высотами в этом жанре.
Конечно же в проекте не обошлось без нескольких десятков микроанимаций. Хотя многие из них не совсем «микро» =)