HTML в видео
Превратите веб-анимацию, код Canvas и Three.js в MP4
Начните с шаблона
- Окно прямого эфира Скруглённое окно спикера с плашкой LIVE и подписью; звук видео тоже на таймлайне
- Медиа в рамке Окно с белой рамкой и свечением, подпись в углу; появляется с масштабом и может приблизить область
- Фотостена Вертикальные фото появляются в ряд, у каждого подпись
- Триптих крупных планов Изображения вплотную рядом, у каждого подпись, внизу номер и название главы
- Галерея с лентой Миниатюры внизу подсвечиваются по очереди, большое фото меняется
- Раскадровка и основное Слева колонка кадров раскадровки, справа основное окно с подписью
- Объяснение на половину экрана Крупный текст слева (вторая строка акцентом), медиа справа, отметка таймлайна внизу
- Заголовок с видео внутри Ваше видео или фото внутри огромных букв, с надзаголовком и подзаголовком
- Макет телефона Ваше видео в рамке телефона, слегка парящей
- Значок в углу Логотип и имя всё время в углу
- Зернистый градиент Плавный градиент от бирюзы к оранжевому с плёночным зерном — фон на нижней дорожке
- Всплывающий заголовок Крупный заголовок с подчёркиванием и подзаголовком
- По словам Слова появляются по одному в ритм
- Рост данных Столбцы растут, число увеличивается
- Нижняя плашка Плашка с именем и должностью
- Световая волна Луч света проходит по кадру
- Обратный отсчёт 3, 2, 1 появляются, кольцо убывает
- Печатная машинка Печатает по букве с мигающим курсором
- Кольцо прогресса Кольцо заполняется до нужного процента, число растёт
- Обвести Нарисованный от руки круг обводит главное
- Вращающаяся 3D-фигура Металлический узел медленно вращается (Three.js)
- Музыкальные полосы Полосы прыгают под музыку на таймлайне и вспыхивают на долях
- Карточки субтитров Субтитры отрезка появляются по одной карточке с акцентной полосой; скройте дорожку — останутся только карточки
- Заголовок с выделением Яркая полоса маркера проходит по кремовому фону, крупные буквы падают по одной
- Кинетический текст По слову на экран с ударом, чёрные, жёлтые и кремовые плашки сменяются по диагонали
- Карточка-вопрос Маленький ярлык и две крупные строки, вторая на яркой полосе
- Наклейки-ярлыки Кремовые полоски бумаги появляются под углом (разделяйте |)
- Обратный отсчёт с плашками Огромные цифры сменяются, каждая вталкивает новую цветную плашку
- Метки-капсулы Крупный заголовок, ряд тёмных меток-капсул появляется по очереди, внизу выделенный вывод
- Карточки состояний Колонка карточек слева по очереди прокручивается в фокус, справа крупное сравнение
- Таблица меток Тёмная панель построчно показывает «метка → значение», метки моноширинным шрифтом
- Карточка цитаты Маленькая метка слева вверху и длинная цитата, проявляющаяся строка за строкой
Один клик — и редактор открывается с уже добавленной анимацией. В шаблонах со слотами перетащите видео или изображение на карточку или нажмите «Использовать мои файлы» — к открытию редактора файл уже будет на месте. Файлы остаются на вашем устройстве, ничего не загружается.
Вставьте веб-анимацию на Canvas, SVG, GSAP или Three.js: она отрисуется покадрово поверх видео и экспортируется в MP4 или GIF. Бесплатно, без водяного знака.
Вставьте код веб-анимации или импортируйте файл .html — он станет анимационным клипом на таймлайне: прозрачный фон, поверх вашего видео или изображения, и его, как любой другой клип, можно двигать, масштабировать, менять прозрачность, добавлять ключевые кадры и анимации появления и исчезновения.
Редактор отрисовывает анимацию покадрово по времени, а не записывает экран: один и тот же момент всегда даёт один и тот же кадр, поэтому превью точно совпадает с экспортом. Math.random, Date и requestAnimationFrame переводятся на детерминированные часы; GSAP и Three.js уже встроены, подключать внешние скрипты не нужно.
Код выполняется в изолированной песочнице без доступа к сети, поэтому внешние изображения и шрифты не загрузятся; при необходимости встройте их как адреса data:. Параметры, которые объявляет сама анимация (текст, цвета, числа), появляются в панели настроек справа — поменяйте их и сразу экспортируйте в MP4 или GIF.
Частые вопросы
- Какие способы написания поддерживаются?
- Четыре распространённых способа работают сразу: определить window.__seek(t), который рисует кадр для заданной секунды; создать приостановленный таймлайн GSAP и положить его в window.__timelines; расставить сцену Three.js по времени внутри __seek и отрендерить; или обычный цикл requestAnimationFrame. Если на странице один canvas, берётся он сам; иначе вся страница (SVG, CSS, текст) отрисовывается как один кадр.
- Можно ли подключать библиотеки с CDN?
- GSAP (с плагинами CustomEase, MotionPath, MorphSVG, DrawSVG и SplitText) и Three.js уже встроены, а CDN-адреса, ведущие на них, автоматически заменяются встроенной копией. Другие внешние библиотеки не загрузятся: у песочницы нет доступа к сети.
- Есть ли в экспортированном видео звук?
- У анимационного клипа нет своего звука, а аудио, которое проигрывает код, не записывается. Добавьте музыку или озвучку отдельно на таймлайн и экспортируйте вместе с анимацией.
- Что делать, если код выдаёт ошибку?
- Вверху превью и на самом клипе появится сообщение об ошибке, а её исходный текст — в окне кода. Нажмите «Попросить ИИ исправить»: ИИ прочитает код, исправит его и проверит результат. До этого превью показывает последний нормальный кадр, другие клипы не затронуты.
- Мой код куда-то загружается?
- Нет. Код хранится вместе с проектом в вашем браузере, рендерится и экспортируется на вашем устройстве. Он загружается вместе с проектом, только если вы сами сохраните проект в облако.