Как Vercel создала платформу для конференции Ship 2025: от феррожидкости до ИИ

Vercel, компания, стоящая за популярным фреймворком Next.js и облачной платформой для фронтенд-разработчиков, поделилась в своём блоге деталями создания сайта и визуального оформления для конференции Vercel Ship 2025. Это ежегодное мероприятие, на котором компания демонстрирует новые продукты, делится видением будущего и, что не менее важно, создаёт впечатляющий пользовательский опыт, отражающий качество её решений. В этой статье мы разберём ключевые технические решения: от анимации на основе феррожидкости до использования генеративного ИИ, модульной компонентной системы и оптимизации производительности.

Дизайн и 3D-визуализация на основе феррожидкости

Центральным элементом визуального стиля конференции стала анимация, напоминающая поведение феррожидкости — жидкости, которая под воздействием магнитного поля образует сложные шиповидные структуры. Команда Vercel использовала эту метафору для создания динамичных 3D-сцен, которые появляются на сайте и в промо-материалах. Вместо того чтобы полагаться на готовые библиотеки, разработчики написали собственные шейдеры на GLSL, что позволило добиться плавной анимации в реальном времени прямо в браузере. Для рендеринга использовался WebGL, а для управления сценами — Three.js. Это не просто декоративный элемент: феррожидкостные переходы визуализируют поток данных и идей, что перекликается с основной темой конференции — скорость и плавность разработки.

Как Vercel создала анимацию феррожидкости для своего сайта?

Для создания феррожидкостной анимации команда использовала симуляцию частиц на GPU. Каждая частица имеет положение, скорость и заряд, а магнитное поле моделируется как набор аттракторов, которые можно перемещать в трёхмерном пространстве. Алгоритм симуляции — модифицированная версия smoothed-particle hydrodynamics (SPH), адаптированная для работы в браузере. Чтобы анимация была плавной на разных устройствах, разработчики реализовали адаптивный уровень детализации: на мобильных устройствах количество частиц уменьшается, а на десктопах — увеличивается до 50 тысяч. Весь рендеринг происходит на видеокарте через WebGL 2.0, что обеспечивает 60 кадров в секунду даже на средних смартфонах.

Генеративные ИИ-воркфлоу в производстве контента

Интересно, что Vercel активно применила генеративный искусственный интеллект для создания части визуального контента. В частности, для генерации текстур и фоновых изображений использовались модели Stable Diffusion, которые затем дорабатывались вручную дизайнерами. Такой гибридный подход позволил ускорить процесс создания уникальных визуальных элементов, сохранив при этом контроль над качеством. Кроме того, ИИ помогал в создании вариаций логотипа и иконок для разных разделов платформы — нейросеть генерировала десятки вариантов, из которых команда отбирала лучшие. Это не первый случай использования ИИ в Vercel: ранее компания интегрировала ИИ-функции в свой продукт v0, но здесь акцент сделан именно на дизайнерский пайплайн.

Модульная компонентная система и производительность

Платформа конференции построена на основе модульной системы компонентов, что позволяет быстро собирать страницы из готовых блоков. Каждый компонент — будь то расписание, карточка спикера или плеер трансляции — является самостоятельным элементом, который можно переиспользовать и настраивать через пропсы. Такой подход не только ускоряет разработку, но и улучшает производительность: благодаря ленивой загрузке и code splitting страницы загружаются практически мгновенно. Vercel также использовала собственный фреймворк Next.js с рендерингом на стороне сервера (SSR) и статической генерацией (SSG) для страниц, которые не требуют частого обновления, что позволило добиться высокой скорости работы даже при пиковых нагрузках во время трансляции.

Предыстория и контекст: эволюция конференций Vercel

Vercel проводит две крупные конференции: Vercel Ship и Next.js Conf. Обе служат не только для анонсов, но и как демонстрация возможностей платформы. В прошлые годы команда экспериментировала с разными подходами: от минималистичного дизайна до сложных анимаций. В 2025 году ставка была сделана на «жидкость и скорость» — эти слова стали лейтмотивом всего мероприятия. Интересно, что концепция феррожидкости возникла из желания визуализировать «текучесть» современной разработки, где код быстро переходит из репозитория в продакшн. Это также отсылка к одному из ключевых продуктов Vercel — Edge Functions, которые выполняются на границе сети с минимальной задержкой.

Кого затронет и как: разработчики, дизайнеры и бизнес

Для фронтенд-разработчиков и дизайнеров этот кейс — источник вдохновения и практических приёмов. Показано, как сочетать шейдеры, ИИ и компонентный подход для создания высокопроизводительных веб-приложений. Для бизнеса это пример того, как инвестиции в UX и визуальную идентификацию окупаются: конференция собрала рекордное количество онлайн-участников, а сайт выдержал пиковые нагрузки без сбоев. Российским разработчикам стоит обратить внимание на использование WebGL и GLSL — эти технологии становятся стандартом для интерактивной графики в браузере, и Vercel показывает, как их применять в реальном проекте.

Что будет дальше: открытые исходники и уроки

Vercel пообещала в ближайшее время опубликовать часть кода платформы в открытом доступе, включая компоненты и шейдеры. Это позволит сообществу не только изучить детали, но и адаптировать решения для своих проектов. Кроме того, компания планирует выпустить серию технических постов, где подробно разберёт каждый аспект — от симуляции частиц до ИИ-воркфлоу. Следующая конференция Next.js Conf ожидается в конце 2025 года, и можно предположить, что наработки с Ship будут использованы и там.

Итог

Проект Vercel Ship 2025 — пример того, как современные веб-технологии (WebGL, ИИ, компонентные системы) могут быть объединены для создания впечатляющего пользовательского опыта. Для разработчиков это не только вдохновение, но и практическое руководство по созданию высокопроизводительных интерактивных сайтов. Следите за блогом Vercel — открытые исходники и технические статьи помогут глубже разобраться в деталях.