Легенды веб-дизайна: технический разбор работ студии Unseen

Характерные особенности для Unseen — масштабное использование WebGL для 3D и визуальных эффектов, интерактивные mouse-эффекты (например, liquid-like деформации), плавные переходы с применением постпроцессинга (fluid, distortion и др.), а также оптимизационные техники: инстансинг, работа с текстурами, снижение количества draw calls. В проектах широко применяются оригинальные шейдерные эффекты для изображений и интерфейсных элементов.

Для студии характерен нарративный подход: storytelling, мини-игры (квизы и т. п.), а также аудио-сопровождение — как ambient-звучание, так и синхронизация звуков с объектами 3D-сцены. Всё это создаёт эффект погружения.

Из недостатков можно отметить высокую нагрузку на GPU: проекты нередко сильно разогревают устройства (например, MacBook Air M2). Кроме того, показатели PageSpeed и аналогичных метрик не всегда высоки, однако в данном случае приоритетом являются эмоции, вовлечённость и уникальный опыт.

WebGL как core-технология

WebGL используется во всех проектах студии для создания ярких интерактивных опытов. Это может быть как 3D-интерфейс (слайдеры, гриды изображений — CLOU, COSMOS), так и полноценные 3D-миры (RSPCA, Blue Marine).

Почерк студии

• Органичные, fluid-анимации.
• Использование отражений и имитации отражающих поверхностей.
• Активный постпроцессинг (godrays, fluid, distortion).
• Частицы как базовый элемент визуального стиля.
• Большое количество собственных шейдеров.

Переходы внутри canvas

Плавные переходы между сценами — фирменный приём студии. Каждая сцена рендерится в отдельный render target, а на финальном экране применяется фрагментный шейдер, который смешивает текстуры и добавляет маски или искажения. Так создаётся эффект перелива и глубины (fluid pass, distortion, dissolve).

Это решение позволяет переключать контекст без резких скачков. Примеры — сайты Unseen, Blue Yard.

WebGL-эффекты на движение мыши

Liquid-like эффекты с шумом и шлейфом курсора применяются практически во всех проектах. Они варьируются от реалистичных PBR-деформаций (Symphony — raycasting для «вдавливания» террейна) до мультяшных low poly-сцен (Klook).

Чаще всего реализуются через постпроцессинг на full-screen quad (distortion + noise + accumulation).

Оптимизация

Основные подходы:

• Удаление невидимых фейсов.
• Запекание анимаций (baked animations).
• Использование лёгких текстур (matcaps, baked).
• LOD — упрощённые модели на расстоянии.
• Оптимизация draw calls (объединение мешей, WEBGL_multi_draw).

Подробнее — смотрите анализ Symphony of Vines.

Плавность и кастомный скролл

Плавность анимаций достигается, в частности, через демпфирование движения камеры.

Кастомные скролл-библиотеки (Lenis, ASScroll) позволяют синхронизировать прокрутку со сценой и анимациями, создавая цельный user experience.

Работа с изображениями

Изображения интегрируются в WebGL-сцену и обрабатываются шейдерами: distortion, noise-based displacement, цветокоррекция и другие эффекты.

3D UI-элементы

Интерфейсные элементы (карточки, кнопки, текстовые блоки) нередко становятся частью 3D-сцены, взаимодействуют с камерой, светом и шейдерами.

Подходы:

• Spatial navigation — интеграция UI с объектами сцены.
• Реакции на движение камеры (billboarding, смещения, анимации).
• Subtle-анимации (микропараллакс, небольшие изменения position, rotation, scale).

Во всех проектах можно отметить внимание к микро-анимациям: hover-эффекты, реакции элементов на scroll, плавные переходы, тщательно подобранные easing-кривые и учёт velocity. Всё это усиливает тактильность и делает интерфейс «живым».

• Универсальные mouse-эффекты легко адаптируются для разных проектов.
• Постпроцессинг усиливает нарратив, но требует балансировки производительности.
• Кастомный скролл обеспечивает seamless user experience.
• Оптимизация встроена в рабочий процесс.
• Использование Theatre.js (например, Symphony of Vines) позволяет управлять сложными анимационными таймлайнами и синхронизировать 3D, UI и шейдеры.

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