Hero-анимации
Главный экран с движением вместо видео-фона: градиенты, частицы, орбиты, параллакс на чистом CSS и SVG.
heroРазрабатываем моушн прямо в коде: интерактивный, лёгкий, адаптивный. Вставляется на любой сайт без плеера и монтажа — и работает быстрее, чем видео, на мобильных, при плохой связи и на слабых устройствах.
Подбираем формат под задачу. Не «добавить анимацию ради анимации», а заменить конкретный видео-фрагмент на код, который делает то же самое, но лучше.
Главный экран с движением вместо видео-фона: градиенты, частицы, орбиты, параллакс на чистом CSS и SVG.
heroСлова и цифры, которые двигаются по смыслу. Акценты на ключевых фразах — без видео и монтажа.
typeИконки, схемы и рисунки, которые «оживают» по ховеру или скроллу. Рисуются линией, как в руке.
svgВместо обучающего видео — короткие сценки в коде: как работает продукт, шаг за шагом.
productНаведение, нажатия, загрузка, переключение вкладок. Мелочи, по которым интерфейс ощущается «живым».
uiСцены, которые раскрываются по мере прокрутки. Работают на чистом CSS, без библиотек и плагинов.
scrollБрендовый знак, который собирается, вращается, рисуется. Заменяет анимационную заставку.
brandДоводим анимацию до 60 FPS: убираем «тяжёлые» свойства, включаем GPU, тестируем на мобильных.
fpsПроверяем, какая анимация повышает конверсию. Сравниваем варианты и оставляем рабочий.
abРаскройте пункт — увидите, что происходит с сайтом, когда вместо видео стоит CSS/SVG-анимация. И на какие детали мы смотрим в первую очередь.
Короткий видео-ролик на фон — это 2–8 МБ. Пользователь на мобильном тратит трафик, а сайт ждёт загрузки. Та же сцена на CSS/SVG занимает 1–5 КБ и не требует загрузки медиафайла.
Обратите внимание: видео-фон почти всегда попадает в LCP и ухудшает Core Web Vitals. CSS-анимация не грузит медиа, поэтому не тормозит главный экран.
Анимации на transform и opacity попадают на GPU-композитор и почти не трогают CPU. Видео же декодируется и рендерится браузером каждый кадр — на слабых телефонах это просадки, дроп-кадры и шум вентилятора.
Деталь: для 60 FPS анимируем только transform и opacity. Свойства вроде width, top, box-shadow в анимации — прямой путь к дёрганию.
Видео вставлено в фиксированный прямоугольник. Изменение пропорций экрана = кроп или чёрные полосы. SVG-анимация тянется и переставляется как обычный элемент, а цвета и размеры управляются через CSS-переменные.
Деталь: одна и та же SVG-сцена может менять цвет под тему сайта. Видео для этого пришлось бы перерендеривать.
Видео проигрывается линейно — оно не знает, где курсор и на каком месте скролла пользователь. CSS-анимация реагирует на :hover, :focus, скролл и системные настройки: движение продолжается только пока на элемент смотрят.
Важно: prefers-reduced-motion — не формальность. Если у пользователя отключена анимация в системе, мы обязаны это уважать и показывать статичную версию.
Поменять цвет, скорость или заменить текст в видео — это снова монтаж и рендер. В коде — правка одной строки CSS. Через год команда без дизайнера сможет поддерживать анимацию.
Акцент: код живёт в репозитории рядом с остальным сайтом. Никаких «а где исходник видео?» — всё под контролем версий.
Каждый паттерн — готовый кусок кода, который вставляется на любой сайт. Легко менять цвета, скорость и текст. Всё работает без библиотек.
Hero · SVG
Типографика · CSS
Данные · SVG
UI · CSS
UI · JS-less
Hero · CSS
Scroll · CSS
Brand · SVG
Фон · SVG
UI · CSS
Типографика · CSS
UI · SVG
UI · 3D
UI · SVG
3D · CSS
Расскажите, где у вас сейчас стоит видео и что оно должно показывать. Предложим, как заменить его кодом: легче, быстрее и интерактивнее — без потери смысла.