Десять лет — странная вещь. Вы идете, опустив голову, клиент за клиентом, срок за сроком, и однажды утром кто-то говорит, что прошло десять лет, и вы не совсем понимаете, что это значит.
Мы не хотели отмечать это новым сайтом-портфолио. Обычный вид: уточненная сетка кейсов, чистая страница «О нас», красивая анимация героя. Это было похоже на бантик на картотеке. В портфолио написано: вот что мы сделали. Но юбилей – это нечто другое. У юбилея есть характеры. В нем есть главы. В нем есть люди, которые приехали, изменили ситуацию и в конечном итоге ушли, и форма, которая становится видимой только по прошествии достаточного времени.
Итак, мы сделали комикс.
Десять глав, по одной в год, с иллюстрациями Давиде Граци, местного иллюстратора, которого мы знаем и любим, который месяцами работал с нами, чтобы придать каждому году собственный визуальный характер. С самого начала мы знали, что нам не нужна ретроспектива, похожая на пресс-кит. Работа Давиде сделала это возможным. Он рисовал людей. Настоящие люди, которые пришли, оставили свой след, сделали каждый год таким, какой он был. В каждой главе рассказывается о том, что произошло: кто присоединился к студии, кто ушел, каково было работать, какая атмосфера была в те месяцы.
Тон смешной и немного гиперболический. Десять лет настоящих людей, со всей теплотой и неловкостью, которые с этим связаны.
Мы также хотели, чтобы он существовал как физический объект. Прежде чем была написана хотя бы одна строка WebGL, существовала печатная версия: спроектированная, скомпонованная и фактически напечатанная на бумаге. Что-то в этой истории казалось, что ей нужен вес, не тот, который живет на вкладке браузера и исчезает, как только вы его закрываете, а тот, который лежит на столе или в ящике стола.
Интерактивный опыт появился позже, как способ поделиться той же историей с остальным миром.
Год спустя
На сайте есть строчка: год спустя…
Это не декоративно.
Проект стартовал в 2025 году. У нас были ранние тесты прокрутки, первые эксперименты с WebGL, предварительные макеты панелей. А потом, как это обычно бывает, работа с клиентами накопилась, приоритеты сместились, и все дело пошло в ящик.
Мы вернулись к нему в 2026 году. Начинать заново через год неудобно по-особому: нельзя притворяться, что выбор, который вы сделали в первый раз, был неизбежен. Вы рассматриваете их как выбор. Вы перестаете оправдывать ранние решения и начинаете спрашивать, были ли они на самом деле правильными, и иногда ответ — нет.
Поэтому мы поместили это в копию. «Год спустя» находится на сайте, потому что это произошло, потому что лучше поздно, чем никогда, и потому что выполнение данного себе обещания по-прежнему имеет значение, даже если это займет на год больше, чем планировалось.
Как работает опыт
Сайт представляет собой горизонтальный комикс, управляемый прокруткой. По мере прокрутки камера перемещается по панелям каждой главы, следя за вашим прогрессом в течение года. Все визуальное работает внутри фиксированного холста WebGL, созданного с помощью Реагировать три волокна. Ленис обеспечивает плавную прокрутку, передавая в сцену данные о местоположении в реальном времени. GSAP управляет анимацией вместе со слоем, который находится над холстом: подписи, заголовки глав и другие текстовые элементы, находящиеся за его пределами.
Контент поступает из автономного бэкэнда WordPress, где каждому году соответствует свой собственный тип сообщений. На стороне Three.js положения кадров и цели камеры жестко закодированы в файле данных на каждый год. Частично это было сделано для того, чтобы дать нам точный пространственный контроль над тем, как каждая глава читается как композиция, а частично потому, что мы никогда не создавали сцены предварительно в Blender. Все помещалось прямо в Three.js, на ощупь, перебирая в браузере. Жесткое кодирование координат было не столько дизайнерским решением, сколько естественным следствием того, как мы работали.
Фон представляет собой плоскость шейдера GLSL, реагирующую на скорость прокрутки. Сами тени генерируются во фрагментном шейдере с использованием шума fBm, слоистых октав шума Перлина, которые придают патчам органическое, нерегулярное качество.
В состоянии покоя или при медленной прокрутке они распространяются по плоскости рыхлыми скоплениями, как дым. Прокрутите быстрее, и они растянутся в тонкие, направленные, вытянутые полосы, которые размывают ощущение места и подталкивают ощущение к скорости, к течению времени. Это незаметно, но оно заслуживает своего места.
Когда вы переходите от одного года к другому, сначала растворяются мягкие тени фона. Затем отдельные панели новой главы появляются отдельно, разбросанные, еще не на своих местах, и выравниваются, прежде чем объединиться в полную страницу. Год собирается перед вами.
Это должно ощущаться не как загрузка страницы, а скорее как что-то прибытие.
Книжная навигация
На этой странице показан другой вариант: 3D-книга, полностью созданная с помощью Three.js. Каждый лист книги представляет собой BoxGeometry. Перетащите влево, и страница перевернется вперед; перетащите вправо, и он повернется назад. Обработка жестов выполняется @use-gesture/reactа GSAP управляет фактической анимацией переворачивания. Перелистывание страниц сопровождается звуком. Книга выдвигается из-за экрана при входе, поворачивается на место и закрывается таким же образом, когда вы переходите в другой год.
Мышиный след
Мы продолжали спрашивать себя: как сделать веб-страницу похожей на комикс, не опираясь только на иллюстрации?
Когда вы перемещаете мышь, она оставляет след. По сути, это двухпроходный эффект WebGL: первый проход аккумулирует движение в текстуру рендеринга, которая медленно исчезает, а второй преобразует его в узор из полутоновых точек. Но причина, по которой мы его построили, не техническая. Дело в том, что точка изгиба, сетка из крошечных кругов, придающая офсетной печати текстуру, является одним из самых узнаваемых знаков этого носителя.
Мы хотели, чтобы эта отсылка жила в самом взаимодействии, а не только в иллюстрациях. Точки следуют за вами по странице, растекаются по панелям и незаметно сжимаются, когда вы наводите курсор на что-то, на что можно нажать. Мелочь, но для нас было важно, чтобы комическая логика пронизывала все, не только в художественном оформлении, но и в том, как вы проходите через этот опыт.
Оптимизации
Для текстур панелей мы использовали сжатие KTX2 с помощью useKTX2 из библиотеки Drei React Three Fiber. Этот формат интересен тем, что он пропускает декодирование ЦП перед полной загрузкой: графический процессор считывает его напрямую в родном сжатом формате. Мы видели, как он использовался в проектах, которыми мы восхищались, и хотели понять, как он работает на практике.
Мы серьезно думаем о том, чтобы все было легко. Все панели комиксов используют один экземпляр PlaneGeometry, а не распределяют новую геометрию для каждой сетки. Мы ограничили соотношение пикселей устройства значением 1,5 и отключили функции WebGL, которые не используются в сцене, такие как трафаретный буфер и карты теней. AdaptiveDpr снижает разрешение еще больше, если частота кадров падает. Материалы и сроки GSAP явно удаляются при размонтировании, поэтому при навигации ничего не накапливается. А текстуры для следующей главы предварительно загружаются при переходе страниц, поэтому ожидание при переходе между годами максимально короткое.
Это идеально? Нет, есть вещи, которые мы бы сделали по-другому.
Но оно наше, и это что-то значит.
Звук как глава
У каждого года есть своя звуковая дорожка, подобранная так, чтобы соответствовать настроению повествования этой главы, а не для того, чтобы заполнить тишину. Это небольшое редакционное решение, которое в конечном итоге имеет большее значение, чем вы ожидаете: правильное музыкальное произведение меняет то, как вы читаете страницу.
Под капотом управление звуком осуществляется через Howler.js. Треки плавно исчезают по мере перехода из одного года в другой. На рабочем столе скорость прокрутки слегка увеличивает скорость воспроизведения: прокрутка происходит быстрее, и музыка ускоряется вместе с вами.
Мы также полностью пропускаем звук при медленном соединении. Прежде чем что-либо воспроизводится, мы проверяем API сетевой информации на наличие сигналов saveData, 2G или 3G. Если соединение выглядит медленным, музыка просто не запускается. Это не радикальная оптимизация, но казалось правильным решением: звук был самым тяжелым активом на мобильных устройствах, и принудительно использовать его при слабом соединении было бы хуже, чем тишина.
Как ощущается строительство для себя
Это та часть, которая удивила нас больше всего.
Мы постоянно создаем что-то для клиентов. Всегда есть краткое содержание. Всегда есть чье-то суждение, которое нужно учитывать, кто-то, кого можно отвергнуть, если вы идете не так. Создать что-то, что могло бы отпраздновать себя, не имея при этом клиента, — это другой вид давления. Единственный человек, который может сказать вам, достаточно ли это хорошо, — это вы, и оказывается, что это не так освобождает, как кажется.
Чего мы не ожидали, так это того, насколько много мы узнаем о том, чем на самом деле является студия, попытавшись рассказать ее историю. Ты проводишь десять лет внутри чего-то и не всегда видишь это ясно. Создание комикса о тех годах требует своего рода расплаты: по-настоящему задуматься о каждом из них, выбрать, что показать, а что опустить, выяснить, кем на самом деле являются персонажи. Это того стоит.
Для небольшой студии срок до десяти лет — не пустяки.
Мы добились этого благодаря помощи многих людей, и этот проект был нашей попыткой сказать это вслух, а не просто прочувствовать это в частном порядке.
Спасибо
Этого бы не было без нашей команды и без всех без исключения, кто проходил через Studio375 в любой момент за последние десять лет.
Мы все еще собираемся.
Если вы нашли это полезным или вам просто понравилось читать, вы можете следить за нашей работой здесь: Инстаграм, LinkedIn, 375.студия