HTML Animation to Mp4

Convert an HTML/CSS/JS animation — especially a Claude "Design" timeline artifact (a *.dc.html bundle exported from Claude) — into a clean, shareable MP4 using deterministic headless-browser frame capture plus ffmpeg. Use this whenever the user has a web/HTML animation, a Claude Design or Artifacts animation, a `.dc.html` file, an animated promo / explainer / motion graphic, and wants a video file (MP4, reel, short, clip) out of it — even if they don't say "render", "ffmpeg", or "headless". Trigger on phrasings like "convert this animation to mp4/video", "export my HTML animation as a video",

6 stars 3 forksFrontend & Design

Install

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

npx skills add AZR-Software-Solutions/html-animation-to-mp4 --skill html-animation-to-mp4

Manual install

git clone --depth 1 https://github.com/AZR-Software-Solutions/html-animation-to-mp4.git /tmp/html-animation-to-mp4
mkdir -p ~/.claude/skills
cp -r /tmp/html-animation-to-mp4/. ~/.claude/skills/html-animation-to-mp4

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-animation-to-mp4

Turn a browser-rendered animation into a real MP4 video file. The high-quality paths
render **every frame at an exact timestamp** (no screen-recording jitter or dropped
frames), then encode with ffmpeg.

## Capture modes (auto-selected; override with a flag)

| Mode | When | Quality |
|---|---|---|
| **seek** | Claude Design timeline artifact (`*.dc.html`) — auto-detected | Frame-perfect; size + duration auto-detected |
| **virtual** (`--virtual`) | Any generic page, opt-in | Frame-perfect for JS/canvas/WebGL **and** CSS/WAAPI animations (experimental) |
| **realtime** | Any generic page, default | Best-effort; mild timing drift; most compatible |

- **seek** drives the Design engine's own per-frame hook (`data-om-seek-to-time-frame`)
  to each exact time. This is why Claude Design exports come out smooth and crisp with
  zero config — usually you pass nothing but the folder.
- **virtual** freezes the page's clock (`Date`, `performance.now`, `requestAnimationFrame`,
  timers, and CSS/Web-Animations time via `getAnimations().currentTime`) and steps it
  frame-by-frame. Use it when a generic animation must be frame-perfect. If a page
  misbehaves under it (some load-time timer chains can), fall back to default real-time.

## Prerequisites

- **Node 18+**, **`playwright`** (`npm i playwright && npx playwright install chromium`),
  and **`ffmpeg`** on PATH (`ffmpeg -version` should work).

Read the full skill on GitHub

Details

Skill name: html-animation-to-mp4
Repository: AZR-Software-Solutions/html-animation-to-mp4
License: MIT
Repo updated: 28 June 2026

FAQ

What does the HTML Animation to Mp4 skill do?

How do I install the HTML Animation to Mp4 skill?

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

Is HTML Animation to Mp4 popular?

It lives in AZR-Software-Solutions/html-animation-to-mp4, which has 6 GitHub stars and 3 forks.

Related skills

Avatar Sticker Pack

bianzigege/avatar-sticker-pack

Generate a reusable sticker pack from one or more user-provided avatar images. Use when the user asks for avatar stickers, emoji packs, reaction stickers, chibi stickers, human-proportion and Q-version variants, transparent PNG stickers, or a paired sticker set for chat platforms.

Frontend & Design

Xiaoer Artstudio Design

Jane-xiaoer/xiaoer-artstudio-design

Design methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Clau

Frontend & Design

Bauhaus Design

capsrock/bauhaus-design-skill

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,

Frontend & Design

Webcloner

veyralabsgroup/webcloner

Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.

Frontend & Design

Blindspot

IdanTayree/Blindspot

Turn an idea — or a half-planned project already underway — into a buildable blueprint, by interviewing the user one question at a time until the unknowns run out, then deep-reading and verifying real open-source components for each part. Use this whenever someone describes something they want to build but has not specified it ('I want to build an app that…', 'I have an idea for…', 'help me plan/spec/scope this', 'turn my idea into a plan'), whenever they ask for a PRD, a spec, a product requirements document or a build plan, AND equally whenever someone says an existing project feels under-pl

Frontend & Design

Wcss Slurm

dawidlinek/slurm-wcss-skill

Use this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.