Моушен на коде: сайт двигается без видео
Тяжёлый видеофон — злодей, который съедает мегабайты, трафик и позиции в поиске. Герой — моушен-дизайн на чистом коде: те же «дорогие» анимации, но в сотни раз легче и быстрее. Переключите тумблер справа — и посмотрите сами.
- Сцена на коде весит килобайты — видео десятки мегабайт
- Никакой буферизации и «колеса загрузки» — анимация стартует мгновенно
- Правки за минуты: цвет, скорость и форма меняются строкой кода, а не перерендером ролика
Знакомьтесь: команда героев
Шесть технологий моушена на коде. Вместо одного видеофайла — арсенал, из которого собирается сцена любой сложности, и всё это весит меньше одного кадра видео.
CSS-анимации
Плавания, пульсации, появления и параллакс — на чистом CSS. Ноль запросов к серверу, работает даже на слабых телефонах.
SVG-моушен
Векторные сцены: рисующиеся линии, морфинг фигур, движущиеся персонажи. Масштабируется без потерь на любом экране.
Canvas и WebGL
Частицы, 3D-сцены, интерактивный фон, реагирующий на курсор. Голливудский эффект за килобайты скрипта.
Lottie-анимации
Анимация из After Effects экспортируется в JSON и проигрывается кодом: микровзаимодействия, иллюстрации, загрузочные экраны.
Скролл-сценарии
Сцена разворачивается по мере прокрутки: цифры бегут, графики растут, персонаж идёт. Сторителлинг вместо статичного текста.
Уважение к пользователю
Анимации отключаются для тех, кто просил меньше движения (prefers-reduced-motion). Видео так не умеет — код умеет.
Дуэль: видео против кода
Четыре раунда. Нажмите кадр — узнаете, кто победил. Результаты спрятаны за кликом, как положено в комиксе: сначала интрига, потом «БАМ!».
Раунд 1: Вес
Видеофон против сцены на коде — кто легче?
нажмите, чтобы узнать30 МБ → 40 КБ
- в ~750 раз легче
- трафик экономится на каждом визите
Раунд 2: Старт
Сколько ждать первого впечатления?
нажмите, чтобы узнатьБуфер → 0 сек
- видео: сначала загрузка, потом картинка
- код: анимация стартует сразу
Раунд 3: Правки
Клиент просит «поменять цвет и скорость». Сколько это стоит?
нажмите, чтобы узнать2 дня → 2 минуты
- видео: переделка и рендер заново
- код: строка в стилях — и готово
Раунд 4: Поиск
Что скажут Google и Яндекс о скорости страницы?
нажмите, чтобы узнатьLCP ↓, позиции ↑
- метрика скорости растёт
- Core Web Vitals без штрафов за мегабайты
Сколько съедает ваше видео
Двигайте ползунки — расчёт мгновенный. Модель считает трафик и вес сцены при замене видеофона на анимацию на коде.
Сцена на коде взамен видео:
Ориентировочная модель: средние веса сцен и типовая цена трафика. Точный счёт — после аудита вашей страницы.
Вербовка в команду
Прокрутите ленту — от бесплатного аудита до моушена под ключ.
Аудит веса и скорости
- замер: что режет скорость страницы
- список «кандидатов на замену»
- план: что заменить кодом
бесплатно · 1 рабочий день
Запросить аудитВидео → код
- замена видеофона на CSS/SVG-сцену
- сохранение «вайба» ролика
- замер «до/после»
от 60 000 ₽ · 1–2 недели
Обсудить сценуМоушен под ключ
- сценарий движения по скроллу
- Lottie-микровзаимодействия
- внедрение + аналитика вовлечения
от 150 000 ₽ · по ТЗ
Получить сметуПоддержка сцен
- правки анимаций за часы, не дни
- мониторинг Core Web Vitals
- A/B-тесты вариантов сцен
от 12 000 ₽/мес · SLA
Подключить← лента прокручивается →
Моушен-дизайн для сайтов: код вместо видео — экономия и скорость
Моушен-дизайн на коде — это анимации интерфейса и фоновые сцены, созданные технологиями веб-разработки (CSS, SVG, Canvas, Lottie), а не видеофайлами. Результат выглядит как дорогое видео, но весит килобайты, грузится мгновенно и правится одной строкой. Ниже — устройство технологии, честное сравнение с видео и ответы на частые вопросы.
Чем анимация на коде отличается от видео на сайте
Видео — это готовый пиксельный ролик: тяжёлый, квадратный по своей природе и статичный после рендера. Анимация на коде — это инструкции движения, которые браузер исполняет сам: векторная, адаптивная и изменяемая в любой момент.
| Критерий | Видеофон | Моушен на коде |
|---|---|---|
| Вес для пользователя | 10–60 МБ | 15–120 КБ |
| Старт показа | после загрузки файла | мгновенно, без буферизации |
| Реакция на действия | нет — ролик просто играет | интерактив: курсор, скролл, клики |
| Адаптивность | обрезка на разных экранах | масштабируется без потерь |
| Смена цвета/скорости | переделка и рендер | строка кода за минуты |
| Уважение к настройкам | игнорирует prefers-reduced-motion | отключается по желанию пользователя |
| Влияние на SEO | штрафы за вес и LCP | Core Web Vitals без штрафов |
Где моушен на коде работает лучше всего
- Лендинги и промо — первый экран с живой сценой вместо тормозящего видеофона.
- Интернет-магазины — микровзаимодействия: корзина, избранное, фильтры, бегущие цифры скидок.
- SaaS и сервисы — онбординг-анимации и состояния интерфейса, которые видео не передаст.
- Медиа и портфолио — скролл-сценарии, где история разворачивается по мере чтения.
Технологии моушена на коде
- CSS-анимации
- движение и переходы на таблицах стилей: ноль файлов, ноль запросов к серверу.
- SVG-анимации
- векторные сцены: рисующиеся линии, морфинг, движение по траекториям.
- Canvas / WebGL
- частицы, 3D и интерактивные фоны, реагирующие на пользователя.
- Lottie
- экспорт анимаций из After Effects в JSON-файл весом в килобайты.
- Скролл-анимации
- сцены, привязанные к прокрутке: контент рассказывает историю.
- prefers-reduced-motion
- стандарт, по которому анимации отключаются для чувствительных пользователей.
Ответы на частые вопросы о моушен-дизайне на коде
Сколько стоит заменить видео анимацией на коде? Конвертация одного видеофона — от 60 000 ₽; сценарный моушен по всему сайту — от 150 000 ₽. Точная смета — после аудита страниц.
Сколько времени занимает работа? Аудит — 1 день; замена видеофона — 1–2 недели; моушен под ключ с аналитикой — 3–6 недель.
Будет ли анимация тормозить на слабых телефонах? Нет: сцены на CSS/SVG исполняет сам браузер, и они легче видео в сотни раз; для слабых устройств предусмотрен упрощённый режим.
Увидят ли анимацию поисковые роботы? Анимации не мешают индексации: контент остаётся текстом и векторами, а скорость страницы, наоборот, улучшает позиции.
Можно ли соединить код и видео? Да: видео — там, где нужен оператор; код — там, где нужна динамика. Гибрид часто даёт лучший баланс цены и скорости.
Продолжение следует — с вами
Пришлите адрес страницы: за рабочий день замерим, что съедает скорость, и покажем, как будет выглядеть сцена на коде вместо видео.