Для веб-анимации и 3D в браузере подходят разные инструменты, и выбор зависит от того, что именно нужно анимировать: элементы интерфейса, 2D-графику, полноценную 3D-сцену или видео, собранное из кода. Ниже сравниваются открытые библиотеки из каталога Stackora, чтобы было проще определиться.

Критерии выбора

При выборе библиотеки стоит смотреть на несколько вещей:

  • Тип графики: DOM и CSS, SVG, 2D-спрайты или 3D-сцены.
  • Задача: интерактивный интерфейс, игра, презентация данных или видео.
  • Лицензия: большинство перечисленных проектов распространяются под MIT или Apache-2.0, но у Shotcut лицензия GPL-3.0, а у Remotion лицензия в каталоге не указана, поэтому её нужно проверить перед использованием.
  • Зрелость и сообщество: количество звёзд на GitHub дает общее представление о популярности, но не заменяет проверку под вашу задачу.
  • Способ работы: декларативный API, таймлайны, генераторы или рендеринг видео.

Варианты по назначению

3D в браузере

three.js — MIT-библиотека для построения WebGL- и WebGPU-сцен в браузере с легким и простым API. Это самый известный вариант для 3D на вебе, с наибольшим числом звёзд в этой подборке.

Babylon.js — открытый движок для 3D-игр и рендеринга на JavaScript и TypeScript, работающий с WebGL, WebGPU и WebXR. Он подходит, если нужен полноценный игровой движок с поддержкой WebXR, а не только библиотека для сцен.

Компромисс: three.js проще подключить и он даёт больше свободы, а Babylon.js богаче готовыми игровыми возможностями, но тяжелее для небольших задач.

2D-графика и игры

PixiJS — HTML5-библиотека для 2D-графики, построенная на WebGL и WebGPU. Она рассчитана на быструю интерактивную графику и игры. Для интерфейсных анимаций она избыточна, зато для большого числа спрайтов и эффектов работает эффективно.

Анимация интерфейса

anime — лёгкая MIT-библиотека для анимации CSS-свойств, SVG, DOM-атрибутов и JavaScript-объектов. Подходит для точечных анимаций без лишнего веса.

Motion — открытая библиотека анимации для React, JavaScript и Vue с плавными, аппаратно ускоренными анимациями и простым API. Это хороший выбор, если интерфейс написан на React или Vue.

Векторная и Lottie-анимация

dotlottie-web — плеер для Lottie и dotLottie в вебе, построенный на ядре Rust и WASM. Он нужен, когда дизайнеры готовят анимации в формате Lottie и их нужно воспроизводить в браузере.

Программные видео и математические ролики

Эти инструменты создают видео из кода, а не работают в браузере как интерактивная графика.

  • Motion Canvas — TypeScript-библиотека и редактор для векторной анимации, которую можно синхронизировать с озвучкой.
  • Remotion — библиотека на React для программного создания и рендеринга видео.
  • Manim — Python-библиотека для точных анимаций, созданная для объяснительных математических видео.

Если нужен редактор видео с интерфейсом, а не код, посмотрите Shotcut: это бесплатный кроссплатформенный видеоредактор для Windows, macOS и Linux, построенный на MLT и Qt. Он работает с GPL-3.0 и не является библиотекой.

Кому что выбрать

  • Нужна 3D-сцена в браузере: three.js для гибкого API, Babylon.js для игр и WebXR.
  • Нужна быстрая 2D-графика или игра: PixiJS.
  • Нужна анимация интерфейса: anime для DOM и SVG, Motion для React и Vue.
  • Дизайнер передаёт анимации в формате Lottie: dotlottie-web.
  • Нужны видео, собранные из кода: Motion Canvas, Remotion или Manim для математических роликов.

Рекомендация: начните с задачи, а не с популярности. Для большинства веб-интерфейсов хватит anime или Motion, для 3D — three.js, а видео из кода лучше делать на Remotion или Motion Canvas, сверив лицензию перед внедрением. Больше инструментов для разработчиков смотрите в разделе Developer tools и в каталоге Libraries & SDKs.