Chillbase: технологичный сайт с 3D на three.js для бренда работодателя

Chillbase — геймдев-студия с сильным характером и вниманием к деталям. Задача — сделать карьерный сайт, который помогает нанимать: быстро объясняет, кто они, над чем работают, как устроен процесс и что делать кандидату дальше. Мы объединили витрину проектов и культуру команды с прозрачным путём к отклику. Работали одной командой (дизайн и разработка — мы же), чтобы решения оставались цельными — от идеи до кода.

Chillbase активно растёт и конкурирует за внимание сильных специалистов. Поэтому вместо громких лозунгов — конкретика и ясная структура: за три–пять минут человек получает картину и понимает, хочет ли идти дальше. Наша цель — технологичный сайт с 3D без пафоса, который реально работает на HR-воронку.

Визуальный язык построен на частицах: они собираются в образы — от логотипа студии до силуэта разработчика за компьютером. Анимация живёт на заднем слое и работает как мягкий фон: задаёт настроение, но не перекрывает содержание. Поле частиц тонко реагирует на движение курсора (на тач-устройствах — на скролл и касания): лёгкий дрейф и рассеивание добавляют «живости», не мешая чтению и отклику. Мы удерживали баланс между технологичностью и простотой: чистая типографика, короткие тексты без шума, повторяемые паттерны карточек, прямые CTA. Экран за экраном выстроен как маршрут: обзор студии, проекты, роли, процесс, отклик. Переходы между страницами — кинематографичные, но сдержанные: частицы разлетаются и собираются вновь, сохраняя контекст и внимание. Итог — современный сайт для геймдев-студии, «по-геймерски» динамичный, но дружелюбный и лёгкий.

Дизайн передали как Blender-сцену на geometry nodes и перенесли её логику в Three.js Shading Language (TSL) — фактически нодовый «конструктор» поведения. Это наш первый продакшен-опыт на WebGPU и TSL: подход WebGPU-first с fallback на WebGL2 даёт одну кодовую базу, модульность и переиспользование узлов. Движение частиц мы считаем в compute-шейдерах WebGPU; там, где доступен только WebGL2, используем Transform Feedback — так мы сохраняем идею и плавность.

Морфинг между моделями привязали к скроллу, добавили реакцию на курсор. Один и тот же шейдер формирует облака как из вершин 3D-моделей, так и из пикселей изображений — удобно для разных сцен. На практических этапах прошли путь от ~25 000 частиц до ~41 000, а на странице «Карьера» вывели пять полноразмерных фигур с полётом камеры и «искоркой», сопровождающей пользователя — плотность выросла до ~81 000 вершин. WebGPU сайт держит сцену уверенно; для WebGL точечно упростили часть расчётов (curl-noise) в вершинном шейдере, вернув плавность без потери замысла.

Чтобы 3D не мешало интерфейсу, перенесли three.js в Web Worker: тяжёлые вычисления живут в отдельном потоке, основной остаётся быстрым и отзывчивым. Канвас вынесли за скоуп роутинга, поэтому сцена не пересоздаётся на каждом экране — page transition three.js выглядит естественно и «без рывков». Качество адаптируется под устройство: при поддержке WebGPU пользователь видит максимум, в остальных случаях — более простой, но стилистически тот же визуал. Это и есть three.js сайт, который не жертвует UX ради эффектов.

После запуска мы увидели рост вовлечённости в разделе карьеры и сокращение времени до первого взаимодействия. Ключевая ценность — аккуратный баланс «видимого» и «невидимого»: 3D-анимации создают фирменное ощущение бренда, но не мешают чтению и заявкам; производительность остаётся стабильной на типовых устройствах, а навигация — плавной. Архитектура на TSL/WebGPU легко масштабируется: можно добавлять сцены и спецпроекты, не переписывая ядро. В результате это не просто красивый three.js сайт, а рабочий инструмент бренда работодателя.

Если вам нужен технологичный, но лёгкий 3D-сайт под ключ — на three.js/WebGPU без просадки PageSpeed и с внятным UX-сценарием — напишите нам. Обсудим цели и ограничения, предложим честный, производительный подход.

Зачем бренду или студии вообще нужен сайт с 3D?
3D помогает передать характер бренда, выделиться и сделать запоминающийся первый контакт. Когда анимации встроены в смысл — как в нашем проекте с Chillbase — они не отвлекают, а усиливают восприятие и эмоцию.

Почему three.js и WebGPU — это не просто «технология ради технологии»?
Они дают ощущение современности и качества без перегруза. Для пользователя это выглядит как плавная, интерактивная анимация, которой можно управлять; для бренда — как сигнал уровня и технологичности.

Можно ли сделать 3D-сайт, который не тормозит и не раздражает пользователей?
Да. Мы выносим рендеринг в отдельный поток, адаптируем визуал под устройство и создаём лёгкие сцены, которые не мешают навигации. Даже насыщенный three.js сайт может быть быстрым и понятным.

Как понять, нужен ли вашему бренду такой подход?
Если вы хотите, чтобы сайт работал как презентация и инструмент вовлечения — да. Если главная цель конверсия, найм или построение HR-бренда — продуманный 3D-опыт может сильно усилить результат.