Современный веб борется сам с собой. Хочешь красивый сайт с 3D, анимациями и тёмной темой — получишь долгую загрузку и разочарованных пользователей. Хочешь мгновенный отклик — сиди на статичных страницах в стиле «просто и без изысков».
В компании GRAVIT этот компромисс не приняли. Перед командой стояла жёсткая задача: сделать сайт с погружающими 3D-элементами, плавными анимациями и премиальной эстетикой, и при этом не уронить скорость загрузки. Вот инженерные решения, которые помогли этого добиться.
1. Отказ от тяжёлых фреймворков в пользу «голой» скорости
Соблазн взять самый навороченный фреймворк с кучей модулей — велик. Команда сделала наоборот: полный контроль над размером бандла.
В основе — React 19 и сборщик Vite. Быстрая замена модулей позволяла итерировать по сложным анимациям без задержек, а оптимизированный процесс сборки на Rollup ужимал итоговый набор файлов до минимума.
Вместо библиотек компонентов — Tailwind CSS. Утилитарные классы генерируют только тот CSS, который реально используется в продакшене, а не тянут всё подряд.
2. 3D-графика на React Three Fiber
Писать 3D на чистом WebGL — занятие для терпеливых: много кода, много сложностей. Поэтому использовали связку Three.js и @react-three/fiber. R3F позволяет строить 3D-сцену как обычные React-компоненты, а значит, единое состояние между 3D-миром и DOM.
Три секрета производительности
- Полигональные модели выжаты до необходимого минимума — лишние грани просто режутся.
- Оборачиваем 3D в Suspense, чтобы модели грузились только тогда, когда они реально понадобятся, и не блокировали основной текст.
- Когда пользователь уводит кадр за пределы экрана, цикл рендеринга WebGL динамически ставится на паузу. Экономия CPU и GPU — колоссальная.
3. Шёлковые анимации: Framer Motion и GSAP
Чтобы добиться ощущения премиальности, одной 3D-графики мало. Нужны микровзаимодействия, плавные появления блоков. За это отвечают Framer Motion (декларативные анимации интерфейса) и GSAP вместе с Lenis (плавный скролл).
Ключевой трюк — анимировать только CSS-трансформации: translate3d и scale. Если анимировать margin или top, браузеру приходится пересчитывать layout, а это верный путь к «тормозам». Трансформации же уходят на GPU, и даже на мобильных устройствах держится стабильные 60 fps.
Что в итоге
Сайт выглядит как тяжёлый концептуальный проект с большой анимацией, а грузится как статический блог. Никакого компромисса.
Если вы собираетесь строить флагманский цифровой продукт, вот наша памятка.
Ключевые решения
| Компонент | Наш выбор | Зачем |
|---|---|---|
| Фреймворк | React 19 | Контроль над состоянием и компонентный подход |
| Сборка | Vite | Быстрая разработка и минимальный бандл |
| Стили | Tailwind CSS | Только нужные стили, никакой воды |
| 3D | Three.js + React Three Fiber | Декларативное описание 3D-сцены в рамках React |
| Анимации | Framer Motion + GSAP + Lenis | Сочетание декларативных и императивных анимаций для микро-интеракций и скролла |
Частые ошибки при создании 3D-сайтов
- Оставить цикл рендеринга работать постоянно — даже когда сцена не видна. Это, пожалуй, самая распространённая ошибка.
- Анимировать layout-свойства вместо трансформаций.
- Тащить целые библиотеки компонентов ради пары кнопок.
- Загружать все 3D-модели сразу, не используя Suspense.
- Не оптимизировать полигональную сетку: каждая лишняя вершина — это время обработки на слабых девайсах.
Эти решения подходят, если проект рассчитан на долгую жизнь и важен не только внешний вид, но и скорость. Если же сайт — простая визитка без интерактива, такие ухищрения избыточны.
Главный вывод: красивый и быстрый сайт — это не волшебство, а набор осознанных инженерных решений. Выбирайте инструменты под задачу, следите за размером бандла и не давайте браузеру делать лишнюю работу.
Fluxs
Комментарии (0)
Войдите, чтобы комментировать.
Пока нет комментариев. Будьте первым.