SkillFoxx

html-to-video skill

A skill that renders HTML and Canvas animation to MP4, GIF or a transparent layer: a browser grabs the frames, ffmpeg encodes.

  • 194 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The skill runs scripts, a headless browser and ffmpeg on your machine and writes video files to disk.
  • Templates load HTML locally, so avoid rendering pages from untrusted sources.
All reasons and checks

wx4766/html-to-videoAuthor:wx4766

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/html-to-video

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The skill runs scripts, a headless browser and ffmpeg on your machine and writes video files to disk.
  • Templates load HTML locally, so avoid rendering pages from untrusted sources.

This is third-party code. Review the repository files before installing.

What it does

html-to-video renders video from code. An animation is written as a function of time, a headless browser seeks the page to each moment and takes a screenshot, and ffmpeg stitches the frames into an H.264 MP4. The same input always yields the same output, any frame rate works, and music or external SRT subtitles attach through flags. The repository ships 14 templates: a multi-shot explainer, a title card, bar and line charts, a KPI counter, a timeline, a before-and-after comparison and vertical cards for short video. Layouts adapt to the viewport, so landscape and portrait differ by two parameters. A built-in quality check tests renders for repeatability, frozen frames and clipped text.

Who it is for. Anyone making explainer clips, chart animations and promos from HTML who wants an agent to re-render them after a one-line edit, with no cloud service.

Good fit when

  • Produce a 30-second animated product walkthrough from existing HTML.
  • Ship one clip in both 16:9 and 9:16 from a single template.
  • Re-render a bar chart with new data without manual editing.
  • Batch-produce a series of similar clips from a JSON scene list.
  • Export a transparent animated layer to overlay on live footage.

Not a fit when

  • You need photorealistic footage or atmospheric scenes; a video generation model fits better.
  • The job is editing existing footage with color grading.
  • The machine cannot run Chromium and a full ffmpeg build.

Example request

Take the bar-chart template, plug in my quarterly sales and render an 8-second vertical clip at 60 fps.

Limitations

It needs Node.js 18 or newer, Playwright Chromium and a full ffmpeg build on PATH: the stripped-down build shipped with Playwright cannot encode H.264. The author recommends `scripts/install-deps.sh` for dependencies. Rendering is frame by frame, so long high-resolution clips take a lot of time. Linux needs system fonts for Cyrillic and CJK text, for example noto-cjk. The main documentation is in Chinese with an English version in a separate file. The project is young: no npm package exists under this name, so installation is by cloning the repository.

How to disable. Delete the skill folder from the agent's skills directory. The Playwright Chromium download and ffmpeg are removed separately.

FAQ

Is this AI video generation?

No. Your own HTML code draws the clip, while the browser and ffmpeg only capture and stitch frames. Text stays sharp and results repeat from run to run.

Which output formats are supported?

H.264 MP4 by default. The `--gif`, `--poster` and `--alpha` flags produce an animated GIF, a cover frame and a transparent layer.

How do I make a vertical video?

Add `--width=1080 --height=1920` to the render command. Templates adapt to the viewport, so no code changes are needed.

What does the doctor command do?

`npx html-to-video doctor` checks the environment: Node version, browser, ffmpeg. It only reads the system, changes nothing and suggests how to fix what is missing.

How does it differ from Remotion?

Remotion is built on a React project with a build step. html-to-video works with a single HTML file and needs no build, but has no cloud rendering or embeddable player.

Discussion

No questions or reviews yet.

Skills

A CLI for programmatic video from HTML: the agent assembles frames from templates and renders a finished MP4 on your machine

CLIExtended access4.8K

A skill that makes video in pure code: narrated explainers and website promos in 35 visual styles, in 16:9 and 9:16.

SkillExtended access176

A skill that makes promo videos from code: direction, in-browser animation with motion blur, its own score and a 60 fps MP4

PluginExtended access79

html-explainer turns a topic into a video with voiceover, subtitles and cover: HTML frames render to MP4 locally.

SkillExtended access297

A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render

SkillExtended access1.8K

A skill that turns your narration and real assets into a 20–60 second video in the style you pick, rendered locally as MP4.

SkillExtended access53

README in short

The documentation compares the tool with Remotion and Motion Canvas: no project or build step is needed, a single HTML file is enough. A separate section describes a closed loop for agents: the model writes a JSON scene list, rendering runs automatically and the quality check reports what to redo.

README badge

Original 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` |

Report a problem