Анимированная схема без видеомодели: нейросеть пишет HTML-ролик

Объясняющий ролик со схемой и формулами можно сделать вообще без видеомодели. Вы просите текстовую модель — например, Claude Opus 4.8 или GPT-5.5 — написать один HTML-файл, в котором схема появляется по шагам, стрелки прорисовываются, а подписи возникают в нужный момент. Файл открывается в обычном браузере, вы записываете экран, а закадровый голос делаете отдельно в ElevenLabs V3 (Диктор). Главное преимущество этого пути — точность: каждая буква и каждый индекс в формуле набраны как текст, а не нарисованы пикселями, поэтому они не превращаются в похожие на буквы каракули.

Я сам прихожу к этому способу каждый раз, когда в кадре должна быть формула, а не пейзаж. Ниже разберу, когда он выигрывает у генерации видео, как устроить работу по шагам и где он проигрывает.

Почему видеомодель путает подписи, а код — нет

Видеомодель генерирует изображение целиком. Для неё надпись «F = ma» — это набор светлых и тёмных пятен, похожих на буквы, которые она видела в обучающих данных. Короткое слово крупным шрифтом она часто выводит правдоподобно. Формулу с дробью, степенью и нижним индексом — уже как повезёт. Подпись из пяти слов на стрелке может поменять букву от кадра к кадру, а в следующем отрезке превратиться в другое слово.

У HTML-файла логика обратная. Подпись — это строка текста, которую браузер отрисовывает шрифтом. Стрелка — это линия с координатами. Анимация — это инструкция «через 2 секунды плавно показать блок номер три». Ничего не угадывается: если в коде написано «m₁», на экране будет «m₁» в каждом кадре. Если что-то не так, ошибка сидит в конкретной строке, и её можно найти и исправить.

Отсюда и главная мысль статьи: видеомодель хороша там, где нужна живая картинка, а код — там, где нужна точность и управляемость. Строение клетки, круговорот воды, вывод формулы, алгоритм сортировки, этапы исторического события на временной шкале — всё это удобнее собирать кодом.

Когда этот путь подходит, а когда нет

Чтобы не тратить вечер не на тот инструмент, сравните задачи.

Если ролик про то, «как это выглядит», берите видеомодель. Если про то, «как это устроено», начните с кода. Для урока, где картинка должна быть красивой, а формула — выводиться на глазах, есть отдельный разбор в статье про видео-объяснение формулы: там ролик собирается из сгенерированных кадров. Два подхода можно совмещать — например, живое вступление от видеомодели и дальше точная схема из HTML.

Что понадобится

Список короткий, и ничего устанавливать не нужно.

• Текстовая модель в кабинете Most AI. Для кода лучше подходят сильные модели: Claude Opus 4.8, GPT-5.5 или GPT-5.1-Codex. Черновик сценария можно набросать и в бесплатном ChatGPT в чате.
• Любой современный браузер на компьютере.
• Встроенная запись экрана. На macOS это панель по сочетанию Cmd+Shift+5, на Windows 11 — «Ножницы» с режимом записи или игровая панель по Win+G. Подойдёт и бесплатная OBS, если она уже стоит.
• Голосовая модель для закадрового текста — ElevenLabs V3 (Диктор).
• Простой видеоредактор, чтобы положить звук на запись.

Код вы получаете прямо в ответе модели в чате: копируете его в текстовый файл с расширением .html и открываете двойным щелчком. Никаких ключей, подключений и настройки окружения.

Шаг 1. Сценарий по сценам с таймингом

Самая частая ошибка — сразу просить «сделай анимацию про фотосинтез». Модель придумает что-то своё, и вы будете долго объяснять, что имели в виду. Сначала зафиксируйте сценарий: что появляется, в каком порядке и сколько секунд держится.

Помоги написать сценарий объясняющего ролика на 60–90 секунд для 8 класса.
Тема: второй закон Ньютона.
Разбей ролик на 5–7 сцен. Для каждой сцены укажи:
1) что появляется на экране (блоки, стрелки, подписи, формулы);
2) что исчезает или меняется;
3) длительность в секундах;
4) закадровый текст, который читает диктор в этой сцене, не длиннее 2–3 предложений.
Формулы записывай точно, с индексами и единицами измерения.
Никаких людей и фотографий, только схема.

Прочитайте результат как учитель, а не как зритель. Проверьте формулы и определения по учебнику: текстовая модель умеет ошибаться в предметной части, особенно в знаках, единицах измерения и порядке действий, а код эту ошибку честно и чётко нарисует.

Шаг 2. Промт на HTML-файл

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

Напиши один самодостаточный HTML-файл с анимацией по сценарию ниже.
Требования:
- всё в одном файле: HTML, CSS и JavaScript, без внешних библиотек, шрифтов и запросов в сеть;
- фиксированная сцена 1920×1080, по центру окна, светлый фон, крупный читаемый шрифт;
- формулы через HTML (sup, sub) или MathML, без картинок;
- схема из SVG: блоки, стрелки, подписи;
- анимация стартует по нажатию пробела, до этого на экране только заголовок;
- у каждой сцены своя длительность из сценария, все длительности вынеси в один массив в начале скрипта;
- клавиша R перезапускает ролик с начала;
- в конце ролик останавливается на итоговом кадре, без зацикливания;
- никаких мигающих эффектов, переходы плавные, 0,5–0,8 секунды.
В начале файла коротким комментарием перечисли сцены и что в них происходит.

Сценарий:
[вставьте сценарий из шага 1]

Массив длительностей в начале скрипта — ключевая деталь. Когда позже появится озвучка, вы подгоните тайминг под голос, поменяв несколько чисел, а не переписывая анимацию.

Шаг 3. Открыть и проверить код

Сохраните ответ в файл, например newton.html, и откройте в браузере. Дальше две проверки: что файл делает и как он выглядит.

Что делает. Файл, который вы получили от нейросети, — это программа, пусть и маленькая. Пролистайте его перед первым запуском. Нормальный файл для такой задачи содержит разметку, стили и скрипт с анимацией. Настораживать должны обращения к внешним адресам, загрузка скриптов по ссылкам, работа с файлами на диске, формы с отправкой данных. Вы прямо запретили всё это в промте, поэтому любое такое место — повод спросить модель, зачем оно, или попросить убрать. Общие правила проверки собраны в статье можно ли доверять коду от нейросети.

Как выглядит. Пройдите ролик целиком и отметьте проблемы с привязкой к сцене: подпись налезает на стрелку, формула мелкая, блок уехал за край. Типичные сбои — текст, который не помещается в прямоугольник, и стрелки, которые указывают в середину блока, а не на его край.

Шаг 4. Правки по номеру сцены

Не просите «сделай красивее». Просите конкретное изменение в конкретной сцене и требуйте, чтобы остальное не трогали.

В сцене 3 подпись «ускорение a» перекрывает стрелку силы.
Сдвинь подпись выше стрелки на 30–40 пикселей.
Размер формулы в сцене 4 увеличь примерно в полтора раза.
Больше ничего не меняй. Верни файл целиком.

Просьба вернуть файл целиком экономит нервы: не нужно вклеивать куски кода вручную и искать, куда они относятся. Если файл большой и модель начинает сокращать его или пропускать части, попросите показать только изменённые фрагменты с указанием, что именно заменить. После каждой правки снова прогоняйте ролик от начала: изменение в одной сцене иногда сдвигает соседние.

Шаг 5. Запись экрана

Технически это самый простой шаг, но на нём легко испортить результат мелочами.

• Разверните браузер на весь экран (F11 на Windows, Ctrl+Cmd+F на macOS), чтобы в кадр не попали вкладки и адресная строка.
• Уберите курсор с экрана или попросите модель скрывать его во время анимации.
• Выключите уведомления, иначе в середине ролика всплывёт сообщение из мессенджера.
• Начните запись, выдержите секунду, нажмите пробел. Лишнее в начале и конце обрежете в редакторе.

Если на слабом компьютере анимация дёргается при записи, закройте лишние вкладки и программы. Упрощайте эффекты: тени и размытие нагружают браузер сильнее, чем простое движение блоков.

Шаг 6. Озвучка и сборка

Закадровый текст у вас уже есть из сценария. Озвучивайте его по сценам, а не одним куском: так проще заменить одну фразу и подогнать тайминг. В разделе озвучки текста выберите ElevenLabs V3 (Диктор): это режим для чтения текста одним голосом, в отличие от «Диалога», где говорят несколько персонажей. Термины и формулы для диктора записывайте словами: вместо «F = ma» пишите «эф равно эм, умноженное на а», иначе голос прочитает символы по-своему.

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

Платите вы за запросы к текстовой модели и за генерацию голоса, месячной подписки нет. Сколько стоит каждая модель, видно на странице тарифов.

Где этот подход проигрывает

Честный список ограничений, чтобы не было разочарования.

• Это не «одна кнопка». Нужно прочитать сценарий, пролистать код, пройти ролик глазами и записать экран. Для короткой схемы это вечер, но не пять минут.
• Стиль скромнее. HTML-анимация выглядит как аккуратная инфографика. Живой мультипликации, объёма и кинематографичного света тут не будет.
• Ошибки содержания переходят в ролик. Код отображает то, что написала модель. Если в сценарии неверная формула, она будет выглядеть убедительно и чётко, и это хуже, чем размытая.
• Длинный файл хуже поддаётся правкам. После десятка сцен модели становится тяжелее менять код, не задевая соседние части. Длинные темы разумно делить на несколько файлов и склеивать записи.
• Качество записи зависит от компьютера. Встроенная запись экрана иногда даёт рывки. Это решается упрощением эффектов, а не новым промтом.

Частые вопросы