Моушн дизайн средствами Html+Css+Js и cursor. Создаём видео фрагменты веб-анимацией в ИИ

Мне периодически хочется донести какие-то идеи через визуальные образы — видео фрагменты, встроенные в голосовое объяснение. Ничего особого:

• летающие кружочки

• квадратики вырастающие друг из друга

• надписи вылезающие с разных сторон экрана

Я делал это в CapCut, Google Slides, и даже устанавливал Adobe After Effects… Но всегда это было очень… трудно, т.к. по роду деятельности я больше фронтендер. ИИ генераторы видео, которые я пробовал, не передают важные детали.

И вот на днях до меня дошло — можно дать ИИ задачу с желаемой анимацией, и он создаст это в виде html+css+js кода. Потом записать эту страницу на видео и использовать её уже в CapCut, встроив в повествование как визуальный элемент.

ИИ не просто сделает вам весь код анимации. А даст вам варианты, как можно передать идею. То есть вам сначала не обязательно подробно описывать ему задачу, а даете ему суть, и он уже что-то генерирует. Потом, отталкиваясь от этого, двигаетесь дальше, либо в сторону деталей, либо просите другие варианты рассмотреть.

Америку открывать, велосипед изобретать не претендую. Перечислю образы которые мне были нужны и то что сделал ИИ средствами веб-анимации. Ну и технические средства которые использовал.

Технические средства

В редакторе кода cursor (со встроенным ИИ) я собрал реакт проект, веб-приложение: главная страница со ссылками на все отдельные анимации. И каждая страница — один из фрагментов задуманного видео. При необходимости я добавлял страницу и просил ИИ сгенерировать нужную анимацию. Результат проверял на экране размером 1080×1920 (reels, shorts). Если все устраивало, снимал результат в приложении OBS Studio, выставив там такие же размеры видео.

Вот так выглядит редактор Курсор и рядом браузер хром для отладки:

Если вам не нравится что выдает ИИ, вы можете найти элемент в отладчике хрома, там изменять его стили пока не получится красиво как надо и перенести эти изменения в код.

Далее в OBS Studio выставляете нужную страницу из приложения, и делаете её видео запись. Например, здесь это: http://localhost:3000/upstairs

Визуальные образы

1. «Можно начинать с самого нулевого уровня»

В окно чата ИИ в редакторе кода курсор я пишу: нужны ступеньки, а именно: 7 прямоугольников, шириной 1080/7, высотой 1920/8 (чтобы осталось расстояние сверху равное ступеньке), с надписями 0, A1, A2, B1, B2, C1, C2. Левый нижний угол каждого следующего прямоугольника находится там, где правый верхний угол предыдущего прямоугольника. Скачиваю из интернета картинку человечка, ставлю её в папку /public и указываю её в чате с ИИ: надо чтоб этот человечек двигался по ступенькам вверх и по мере его движения ступеньки красиво загорались. Далее приходится смотреть результат, что-то подправлять. Результат:

2. «В основе учебника лежит принцип 1 урок = 10 слов + 1 правило»

Заполни плавно весь экран прямоугольниками с надписями:
слово1, слово2, слово3, слово4, слово5, правило1, слово6, слово7, слово8, слово9, слово10 — это первая строка. И так далее сколько влезет в экран (надписи помогает сгенерировать автодополнение cursor tab — бывший copilot). Результат:

3. «Слова надо выучить так, чтобы вы их моментально вспоминали»

Ставлю картинку мозга из интернета в папку /public, указываю её в чате с ИИ. И говорю: надо чтоб над этой картинкой появлялось русское слово, а потом изо рта, слева направо выходило по буквам английское слово. Подправил координаты вывода текстов и вот результат:

4. «В других курсах/приложениях»

Нахожу в интернете обложки известных учебников и логотипы приложений, закидываю их в папку public, и прошу ИИ сделать анимацию мелькания этих картинок одна за другой. Результат:

5. «Упражнения типа: выберите правильный вариант, заполните пробелы»

6. «Грамматические правила сложным научным языком»

7. «Работа со словарем»

8. «100 уроков = 1000 слов + 100 правил + уверенное владение языком»

Итоговое видео

Озвучивание сделал из текста на elevelabs.io, смонтировал видео в CapCut, подгоняя получившиеся видео ускорением под повествование. А еще записал себя на зеленом фоне для последней сцены.

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

EngEasy.ru — моё приложение английского. Идея, процесс, технологии