Как оживить код и перестать мучиться с видеоредакторами

Вы когда-нибудь пробовали создать качественный обучающий ролик по программированию? Если да, то наверняка знаете эту боль. Сначала вы записываете экран, потом понимаете, что где-то опечатались. Идете в видеоредактор вроде Premiere Pro или After Effects, пытаетесь наложить красивые стрелочки, плавные появления кода, синхронизировать всё это с озвучкой. В итоге — куча потраченного времени и проект, который невозможно поправить, не переделывая половину работы.

Недавно я наткнулся на Motion Canvas. Это инструмент, который предлагает принципиально другой подход: писать анимации кодом на TypeScript. И нет, это не просто библиотека для рисования на канвасе, а полноценная среда разработки видео.

Что это такое на самом деле

Motion Canvas состоит из двух частей. Первая — это библиотека на TypeScript, которая использует генераторы для управления временем и анимацией. Вторая — веб-редактор, который запускается локально и дает возможность смотреть результат в реальном времени, мотать таймлайн и даже менять некоторые параметры объектов мышкой.

Автор проекта, Лукас Моравский, изначально создавал его для своего YouTube-канала. Ему надоело, что сложные визуализации алгоритмов в обычных редакторах превращаются в ад из слоев и ключевых кадров. В Motion Canvas всё строится на программной логике.

Почему генераторы — это удобно

Самая крутая фишка здесь в использовании функций-генераторов (yield). Это позволяет писать код анимации так, будто он выполняется последовательно, хотя на самом деле всё происходит асинхронно во времени.

Например, если вы хотите, чтобы круг плавно увеличился, а потом изменил цвет, код будет выглядеть примерно так:

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
  view.add(<Circle ref={circle} width={100} height={100} fill={'#e13238'} />);

  yield* circle().width(300, 1); // Увеличиваем до 300 за 1 секунду
  yield* circle().fill('#32a852', 0.5); // Меняем цвет за полсекунды
});

Вам не нужно высчитывать миллисекунды или возиться с колбэками. yield* говорит системе: «подожди, пока эта анимация закончится, прежде чем идти дальше». Если нужно запустить несколько действий одновременно, есть метод all(). Это интуитивно понятно любому, кто хоть немного знаком с JS.

Редактор, который помогает, а не мешает

Когда вы запускаете проект через Vite, открывается интерфейс в браузере. Это не просто плеер. Там есть полноценный таймлайн, где можно расставлять маркеры. Эти маркеры потом можно использовать в коде для синхронизации с аудио.

Кстати, о звуке. В Motion Canvas можно загрузить аудиодорожку, и она отобразится на таймлайне в виде волновой формы. Это критически важно, если вы делаете озвучку: вы видите, в какой момент произносите конкретное слово, и можете подогнать появление графики точно под этот момент.

Техническая начинка

Проект живет в монорепозитории и активно использует современные инструменты:

• Vite для быстрой сборки и HMR (горячей перезагрузки).
• TypeScript для типизации всего и вся.
• Lerna для управления пакетами.

Внутри всё разбито на логические модули. Есть ядро (core), которое отвечает за саму логику анимаций, и пакет 2d — стандартный рендерер для векторной графики. Если вам вдруг станет тесно в рамках 2D, архитектура позволяет прикрутить свои способы отрисовки.

Кому это пригодится

В первую очередь — создателям технического контента. Если вы ведете блог на YouTube про IT, делаете курсы или презентации для конференций, Motion Canvas сэкономит вам недели жизни.

Второй сценарий — визуализация данных и алгоритмов. Объяснить на пальцах, как работает сортировка или обход дерева, сложно. Нарисовать это в Figma — долго. Написать код, который сам это нарисует — идеальный вариант.

Из минусов: порог входа всё же выше, чем у условного Canva. Нужно понимать, как работает TS и как устроены генераторы. Плюс, проект еще активно развивается, и документация иногда не поспевает за изменениями в API.

С чего начать

Если хотите потыкать инструмент в деле, алгоритм простой:

1. Клонируете репозиторий.
2. Запускаете npm install.
3. Выполняете npm run template:dev.

После этого по адресу localhost:5173 откроется редактор с примером. Попробуйте поменять параметры в коде и посмотрите, как сцена обновится сама собой. Это затягивает.

Motion Canvas — это отличный пример того, как программистский подход к творческим задачам убирает рутину и оставляет место для самого творчества. Для тех, кто любит полный контроль над каждым пикселем и при этом не хочет тонуть в интерфейсах тяжелых видеоредакторов, это маст-хэв.