WES х SALT AND PEPPER: разработка сайта-портфолио для кинооператора Netflix и Nike — Awwwards

SALT AND PEPPER — студия веб-разработки, которая специализируется на разработке креативных сайтов с нестандартной анимацией и сложным фронтендом. В этом кейсе рассказываем, как разработали сайт-портфолио для Эрин Дж. Уэсли — кинооператора из Лос-Анджелеса, в портфолио которой Netflix, Nike, NBA и Снуп Догг. Реализовали видеогалерею на Pixi.js с кастомными шейдерами и пользовательской прокруткой, оптимизировали воспроизведение видео для глобальной аудитории на любых устройствах и подключениях. Проект получил Site of the Day и Honorable Mention от Awwwards.

Эрин Дж. Уэсли — известный кинооператор из Лос-Анджелеса, штат Калифорния. В ее портфолио — работы для проектов, которые вы, вероятно, видели: «Колин в черном и белом» от Netflix, Nike, NBA и Снуп Догг. Она также талантливый фотограф и регулярно путешествует по миру в поисках новых визуальных источников вдохновения. Мы сотрудничали с ней, чтобы предоставить ее обширное творческое портфолио в новом цифровом формате, который поможет ей найти следующий крупный производственный проект.

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

С технической точки зрения самой сложной частью была видеогалерея на главной странице. Чтобы она работала без сбоев, нам нужно было объединить сразу несколько технологий. Мы связали нашу пользовательскую прокрутку и элементы DOM с Pixi.js и добавили шейдеры. Основное внимание мы уделили доработке и оптимизации работы с видео. Нам нужно было сделать так, чтобы они быстро загружались и плавно воспроизводились на любом устройстве в любом месте. Профессиональная деятельность Эрин охватывает глобальную аудиторию, поэтому нам нужно было предусмотреть поддержку самых разных устройств, подключений и функций.

При работе с видео мы столкнулись с интересной проблемой: первый кадр видео представлял собой черный прямоугольник. Это происходило из-за того, что Pixi.js особым образом рендерит видео. Нам нужно было оптимизировать частоту кадров и анимацию переключения между текстурами видео и изображения, чтобы решить проблему и обеспечить плавную работу видео.

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

Разработка и запуск этого сайта стали для нас творческой и технической задачей. Но вся команда сплотилась, чтобы справиться с ней. Спасибо Эрин за сотрудничество и поддержку на протяжении всего процесса. Было очень приятно работать вместе.