SkillFoxx
Telegram

html-to-video — скилл

Скилл превращает HTML и Canvas-анимацию в MP4, GIF или прозрачный слой: кадры снимает браузер, видео собирает ffmpeg.

  • 194 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Расширенный доступ

Почему такой уровень

  • Скилл запускает скрипты, безголовый браузер и ffmpeg на вашей машине и пишет видеофайлы на диск.
  • Шаблоны открывают HTML локально: страницы из ненадежных источников рендерить не стоит.
Все причины и проверки

wx4766/html-to-videoАвтор:wx4766

Установка

Работает в

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/html-to-video

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

  • Скилл запускает скрипты, безголовый браузер и ffmpeg на вашей машине и пишет видеофайлы на диск.
  • Шаблоны открывают HTML локально: страницы из ненадежных источников рендерить не стоит.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

html-to-video рендерит видео из кода. Анимация описывается функцией от времени, безголовый браузер перематывает страницу на нужный момент и делает снимок, а ffmpeg склеивает кадры в H.264 MP4. Один и тот же вход дает один и тот же результат, частота кадров любая, музыку и внешние субтитры в формате SRT можно подключить флагами. В комплекте 14 шаблонов: многоэтапный ролик-объяснение, титульная карточка, столбчатая и линейная диаграммы, счетчик KPI, таймлайн, сравнение «до и после», вертикальные карточки для коротких видео. Макет подстраивается под размер окна, поэтому горизонтальный и вертикальный форматы отличаются парой параметров. Встроенный контроль качества проверяет рендер на повторяемость, зависания кадров и обрезанный текст.

Для кого. Тем, кто делает объясняющие ролики, диаграммы и промо из HTML и хочет, чтобы агент перерисовывал их по правке одной строки без облачных сервисов.

Подходит, если

  • Сделать анимированный разбор продукта на 30 секунд из готового HTML.
  • Выпустить ролик в двух форматах, 16:9 и 9:16, из одного шаблона.
  • Перерисовать столбчатую диаграмму с новыми данными без ручного монтажа.
  • Автоматически собирать серию однотипных роликов по списку сцен в JSON.
  • Получить прозрачный слой с анимацией для наложения на съемку.

Не подходит, если

  • Нужны реалистичные кадры или атмосферные сцены: подойдет генерация видео моделью.
  • Требуется монтаж готовой съемки с цветокоррекцией.
  • На машине нельзя поставить браузер Chromium и полный ffmpeg.

Пример запроса к агенту

Возьми шаблон bar-chart, подставь мои продажи за квартал и отрендери вертикальный ролик на 8 секунд в 60 кадров в секунду.

Ограничения

Нужны Node.js 18 или новее, Chromium для Playwright и полная сборка ffmpeg в PATH: усеченная сборка, которая идет с Playwright, не кодирует H.264. Автор советует ставить зависимости скриптом `scripts/install-deps.sh`. Рендер идет кадр за кадром и на длинных роликах в высоком разрешении занимает много времени. Для кириллицы и иероглифов в Linux нужны системные шрифты, например noto-cjk. Документация написана по-китайски, английская версия лежит в отдельном файле. Проект молодой: пакета в npm-реестре под этим именем нет, ставят клонированием репозитория.

Как отключить. Удалите папку со скиллом из каталога скиллов агента. Установленный Chromium Playwright и ffmpeg удаляются отдельно.

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

Это генерация видео нейросетью?

Нет. Ролик рисует ваш HTML-код, а браузер и ffmpeg только снимают и склеивают кадры. Поэтому текст остается четким, а результат повторяется от запуска к запуску.

Какие форматы на выходе?

MP4 на H.264 по умолчанию. Флаги `--gif`, `--poster` и `--alpha` дают анимированный GIF, обложку и прозрачный слой.

Как сделать вертикальное видео?

Добавьте `--width=1080 --height=1920` к команде рендера. Шаблоны подстраиваются под окно, код править не нужно.

Что делает команда doctor?

`npx html-to-video doctor` проверяет окружение: версию Node, браузер, ffmpeg. Она только читает систему, ничего не меняет, и подсказывает, как исправить недостающее.

Чем он отличается от Remotion?

Remotion строится на React-проекте со сборкой. html-to-video работает с одним HTML-файлом и не требует сборки, зато не дает облачного рендера и встроенного плеера.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

CLI для программного создания видео из HTML: агент собирает кадры по шаблонам и рендерит готовый MP4 на вашем компьютере

CLIРасширенный доступ4,8 тыс.

Скилл рисует видео кодом: объясняющие ролики с озвучкой и промо-ролики для сайтов в 35 визуальных стилях, 16:9 и 9:16.

СкиллРасширенный доступ174

Скилл делает промо-видео из кода: режиссура, анимация в браузере с размытием движения, своя музыка и готовый MP4 в 60 кадров

ПлагинРасширенный доступ78

html-explainer превращает тему в видео с озвучкой, субтитрами и обложкой: кадры пишутся на HTML и рендерятся в MP4 локально.

СкиллРасширенный доступ297

Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4

СкиллРасширенный доступ1,8 тыс.

Скилл делает 20–60-секундный ролик из вашей озвучки и реальных материалов в выбранном стиле, MP4 собирается локально.

СкиллРасширенный доступ53

Коротко о README

Документация сравнивает инструмент с Remotion и Motion Canvas: здесь не нужен проект и сборка, достаточно одного HTML-файла. Отдельный раздел описывает замкнутый цикл для агента: модель пишет JSON со сценами, рендер идет автоматически, проверка качества сообщает, что переделать.

Бейдж для README

Исходный SKILL.md

---
name: html-to-video
description: 把 HTML/Canvas 动画逐帧渲染成 MP4（可配乐、可卡点、可出 GIF、可出透明层）。当用户说「用代码做视频」「HTML 转视频」「导出 MP4/GIF」「做个动态图解/宣传片/数据动画」「逐帧渲染」「换个风格」「卡点」「音乐配画面」时使用。自带渲染器、14 个版式模板（多镜头讲解片、竖屏 9:16、前后对比、流程图、字幕卡、引言卡、章节卡、界面演示）、12 种视觉风格（孔版印刷 / 剪纸 / 蓝图 / 粉笔 / 等距 / 霓虹 / 瑞士 / 水墨 / 水彩 / 铅笔 / 半调解说 / 黏土立体，一条命令切换）、节拍分析与卡点（--beats / --snap）、分镜预演、浏览器预览、环境自检、图标/人物/运镜素材库，支持透明输出、外部字幕时间轴与 JSON 镜头表，装好依赖后一条命令出片。
agent_created: true
---

# html-to-video · 代码逐帧做视频

## 这套东西是什么

**不是 AI 生成视频**，是**用代码逐帧画视频**：

```
写 HTML/Canvas，把画面写成 frame(t) 纯函数
   → 无头浏览器逐帧 seek 到 t，截图
   → ffmpeg 编成 H.264 MP4
字幕 / 运镜 / 转场全在代码里，改代码重渲即可
```

优点：**确定性**（同输入同输出）、**可控到帧**、**中文文字完美**、**零费用**。
最适合做：讲解动画、动态图解、产品演示、数据可视化动画、宣传片片头。
不适合：实拍感/氛围镜头（那种走 VideoGen）。

**能拿它做什么**（`assets/templates/` 里 14 个模板直接改字就能出片）：

| 模板 | 用途 | 出片 |
|---|---|---|
| `explainer.html` | **多镜头讲解片**：片头 / 人物+气泡 / 要点 / 条形对比 / 片尾，镜头带转场，可喂 JSON 镜头表；横屏恰好三条要点时自动并排成三栏，竖屏（1080×1920）另有上下版式 | `--duration=17.6` |
| `title-card.html` | 视频片头：主标题逐字弹入 + 副标题 | `--duration=6` |
| `bar-chart.html` | 条形图/排名：条形依次生长，数值同步滚动 | `--duration=6` |
| `line-chart.html` | 折线趋势：折线生长 + 数据点亮起 + 末点浮标 | `--duration=8` |
| `number-counter.html` | 大数字/KPI：从 0 滚到目标值 + 涨跌标签 | `--duration=7` |
| `timeline.html` | 时间线/流程：中轴生长，节点逐个点亮 | `--duration=7` |
| `vertical-card.html` | **竖屏 9:16 卡片**：大字标题 + 大数字，抖音/视频号/Reels 用 | `--duration=6 --width=1080 --height=1920` |
| `compare.html` | **前后对比**：左右两栏对照，结论条收口 | `--duration=7` |
| `flow-steps.html` | **流程图动画**：步骤依次点亮，当前步高亮 | `--duration=7` |
| `subtitle-card.html` | **逐句解说卡**：一句话一句地出，底部带进度条 | `--duration=8` + `--srt` |
| `vertical-subtitle.html` | **竖屏字幕卡**：关键词高亮，9:16 原生版式 | `--duration=8 --width=1080 --height=1920` + `--srt` |
| `quote-card.html` | **引言卡**：大引号 + 引文逐行推进 + 出处短线 | `--duration=7` |
| `chapter-card.html` | **章节卡**：序号水印 + 标题 + 章节进度点，切分长片 | `--duration=4` |

Сообщить о проблеме