HTML to Video

把 HTML/Canvas 动画逐帧渲染成 MP4（可配乐、可出 GIF、可出透明层）。当用户说「用代码做视频」「HTML 转视频」「导出 MP4/GIF」「做个动态图解/宣传片/数据动画」「逐帧渲染」时使用。自带渲染器与 11 个开箱即用模板（含多镜头讲解片、竖屏 9:16、前后对比、流程图、字幕卡）、图标/人物/运镜素材库，支持透明输出、外部字幕时间轴与 JSON 镜头表，装好依赖后一条命令出片。

166 stars 13 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add wx4766/html-to-video --skill html-to-video

Manual install

git clone --depth 1 https://github.com/wx4766/html-to-video.git /tmp/html-to-video
mkdir -p ~/.claude/skills
cp -r /tmp/html-to-video/. ~/.claude/skills/html-to-video

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

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

## 这套东西是什么

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

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

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

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

| 模板 | 用途 | 出片 |
|---|---|---|
| `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` |

每个模板**单文件自包含**，顶部有一个显眼的 `CFG` 配置块，改文案/数据即可 ——
不用懂 canvas 也能出片。**11 个模板全部支持换主题**（见「换配色」一节）。
想做别的，再看 `assets/animation-skeleton.html` 从零写。

**做「一支片子」而不是「一段动画」**：用 `assets/lib/scenes.js` 写多镜头 + 转场，

Read the full skill on GitHub

Details

Skill name: html-to-video
Repository: wx4766/html-to-video
License: MIT
Repo updated: 21 October 2026

FAQ

What does the HTML to Video skill do?

How do I install the HTML to Video skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add wx4766/html-to-video --skill html-to-video. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML to Video popular?

It lives in wx4766/html-to-video, which has 166 GitHub stars and 13 forks.

Related skills

Find Broll

141

louisedesadeleer/b-roll-finder

Source b-roll for a video edit — classify each moment, scope the search, return vetted candidates, place on the word. Use when the user says "find b-roll", "/find-broll", "source clips for this edit", or wants footage/memes/screenshots to lay over a talking-head video.

Images, Video & Audio23

Khan Explainer

149

haiderfarooq3/khan-explainer

Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, an

Images, Video & Audio31

Social Captions

145

rediumvex/social-media-caption-generator-claude

Write algorithm-optimized captions/descriptions for social media posts and reels. Supports Instagram (Reels, Feed, Carousel), TikTok, Threads, Facebook, and YouTube Shorts. The user sends material (text, image, script, competitor post, screenshot) and gets ready-to-use captions for ALL platforms at once, in English. Use when asked to "write a caption", "write a description", "caption for instagram", "описание к посту", "подпись для рилса", "описание для тикток", "caption for reels", "social media post", or any caption/description writing task. Also triggers when user sends an image, screenshot

Images, Video & Audio18

Hbg Life Simulation

150

Mr-funny/hbg-life-simulation

Create Chinese HBG “模拟人生 / 人生副本” narrative videos with a consistent comic IP, a rapid multi-life opening, continuous natural-speed narration, synchronized short captions, dense static manga storyboards, audible fixed-level BGM, alternating zoom/pan motion in HyperFrames, and a consent-gated localhost-only account-backed Images API through CLIProxyAPI as the preferred image channel. Use for 模拟人生、人生副本、统一主角漫画、快闪职业开头、旁白配图、静态漫画分镜、zoom 推拉、左右平移、Edge TTS、字幕压制、本地反代自己的 Codex 账号、CLIProxyAPI，或把长篇中文人生故事组装成视频。

Images, Video & Audio27

Watch

144

mathiaschu/watch

Watch a video from YouTube, Instagram, X/Twitter, Vimeo, TikTok or any of ~1800 yt-dlp sites (or a local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or local mlx-whisper fallback, no API key), and hands the result to Claude so it can answer questions about what's in the video.

Images, Video & Audio20

Hyperframes Motion Reel

161

Sunwood-ai-labs/hyperframes-motion-reel-skill

ショーリール品質（Behance / OFFF / Awwwards級）のモーショングラフィックス動画を HyperFrames（HTML + GSAP + SVG + Canvas、Apache-2.0）で制作する。remotion-motion-reel の HyperFrames 版で、Remotion の Company License が不要な構成。テーマ・素材（キャラクター画像、音声など）から世界観・コピー・デザインシステム・タイムライン・サウンドを補完し、120BPM/60fps で拍同期した映像を実装・レンダリングまで行う。「HyperFramesでかっこいい動画」「ライセンスフリーでモーショングラフィックス」「ショーリールをHTMLで」などの依頼時に使用。

Images, Video & Audio24

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.