Мне периодически хочется донести какие-то идеи через визуальные образы - видео фрагменты, встроенные в голосовое объяснение. Ничего особого:
летающие кружочки
квадратики вырастающие друг из друга
надписи вылезающие с разных сторон экрана
Я делал это в CapCut, Google Slides, и даже устанавливал Adobe After Effects... Но всегда это было очень... трудно, т.к. по роду деятельности я больше фронтендер. ИИ генераторы видео, которые я пробовал, не передают важные детали.
И вот на днях до меня дошло - можно дать ИИ задачу с желаемой анимацией, и он создаст это в виде html+css+js кода. Потом записать эту страницу на видео и использовать её уже в CapCut, встроив в повествование как визуальный элемент.
ИИ не просто сделает вам весь код анимации. А даст вам варианты, как можно передать идею. То есть вам сначала не обязательно подробно описывать ему задачу, а даете ему суть, и он уже что-то генерирует. Потом, отталкиваясь от этого, двигаетесь дальше, либо в сторону деталей, либо просите другие варианты рассмотреть.
Америку открывать, велосипед изобретать не претендую. Перечислю образы которые мне были нужны и то что сделал ИИ средствами веб-анимации. Ну и технические средства которые использовал.
Технические средства
В редакторе кода cursor (со встроенным ИИ) я собрал реакт проект, веб-приложение: главная страница со ссылками на все отдельные анимации. И каждая страница - один из фрагментов задуманного видео. При необходимости я добавлял страницу и просил ИИ сгенерировать нужную анимацию. Результат проверял на экране размером 1080x1920 (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 — моё приложение английского. Идея, процесс, технологии