Как работает моушен дизайн, и почему он в коде?

Ещё несколько лет назад «оживить» главную страницу означало одно: снять или отрендерить ролик, положить его в <video autoplay muted loop> и растянуть на всю ширину экрана. Сегодня всё больше продуктовых и маркетинговых сайтов делают то же самое впечатление без единого кадра видео — движение описывается кодом: CSS-анимациями, SVG, Canvas/WebGL, Lottie или Rive. Разберёмся, почему так происходит, за счёт чего код оказывается в десятки и сотни раз «легче», и где видео по-прежнему незаменимо.

Это не один формат, а целый спектр подходов, от самого дешёвого к самому дорогому по ресурсам. Нативный CSS (transform, opacity, keyframes, scroll-driven animations) — самый лёгкий слой: браузер отдаёт такие анимации композитору и GPU, не трогая основной поток.

SVG-анимации добавляют векторную графику, которой можно управлять через DOM и CSS, причём рендерятся они браузером нативно, без дополнительных библиотек, что даёт быстрый старт. Lottie — это JSON-описание анимации, экспортированное из After Effects через Bodymovin и воспроизводимое плеером в рантайме; по сути «умный SVG», которым можно управлять кодом. Rive — бинарный формат со своим рантаймом и state machine, заточенный под интерактив.

И наконец Canvas/WebGL/Three.js — когда нужны честные 3D-сцены, частицы и шейдеры.Объединяет их одно: на сервере лежит не картинка движения, а инструкция, как это движение построить. Пиксели создаются уже на устройстве пользователя.

Это не маркетинг, а разная природа данных.

Видео хранит результат — сетку пикселей для каждого кадра. Даже с отличным кодеком (H.264, VP9, AV1) файл хранит ключевые кадры целиком плюс разницу между кадрами. Десятисекундный луп в 1920×1080 при 30 fps — это 300 кадров по ~2 миллиона пикселей каждый. Компрессия творит чудеса, но вес всё равно растёт линейно с длительностью, разрешением и частотой кадров. Хуже того: для ретины нужен один рендер, для мобильного — другой, для 4K-монитора — третий.

Код хранит рецепт — координаты опорных точек, кривые Безье, ключевые кадры, функции интерполяции, цвета. Вес зависит от сложности описания, но почти не зависит от длительности (луп на 3 секунды и на 30 секунд весят одинаково) и вообще не зависит от разрешения — та же геометрия отрисуется и на 320px, и на 5K без пикселизации.

Фоновое видео в первом экране почти всегда конкурирует за пропускную способность с тем, что должно отрисоваться быстро. Постер-кадр становится LCP-элементом, а сам ролик ест канал, пока пользователь ждёт текст. Код-анимация стартует в тот момент, когда страница уже интерактивна, и не задерживает критический рендер. Google использует скорость как сигнал ранжирования, и тяжёлые страницы чаще проваливают LCP и INP.
Управляемость. Видео играет от начала до конца и не умеет реагировать на пользователя. Код-анимацию можно привязать к скроллу, наведению, состоянию формы, успешной оплате; её можно поставить на паузу, отмотать, перекрасить под тёмную тему, локализовать текст внутри сцены. Это превращает анимацию из декорации в часть интерфейса.
Стоимость изменений. Поменять оттенок в брендбуке — это новый рендер, новый экспорт, новая заливка на CDN в случае видео, и одна переменная в CSS в случае кода. Для A/B-тестов разница принципиальная.
Прозрачность и композиция. Стандартный MP4 не поддерживает прозрачный фон — для альфа-канала нужны обходные пути, тогда как SVG даёт прозрачность нативно. Вписать код-анимацию в произвольный фон, поверх текста, с миксом блендингов — тривиально.
Политики автовоспроизведения и батарея. Автоплей видео на мобильных обставлен ограничениями (muted, playsinline), декодирование жрёт батарею, а на слабых Android-устройствах тяжёлый фоновый ролик заметно греет телефон. Плюс код-анимацию легко отключить по prefers-reduced-motion — для пользователей с вестибулярными расстройствами это не опция, а необходимость.
Доступность и SEO. Текст, который в видео выгорел в пиксели, в код-анимации остаётся настоящим текстом: его индексируют, читают скринридеры, переводят браузеры, выделяют мышью.