# Render HTML Video

Render MP4 and WebM videos from HTML compositions.

- Repository: https://github.com/NousResearch/hermes-agent (259479 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add NousResearch/hermes-agent --skill hyperframes -g -a claude-code -y`
Codex: `npx skills add NousResearch/hermes-agent --skill hyperframes -g -a codex -y`
Cursor: `npx skills add NousResearch/hermes-agent --skill hyperframes -g -a cursor -y`
Gemini CLI: `npx skills add NousResearch/hermes-agent --skill hyperframes -g -a gemini-cli -y`

## Description

Render MP4/WebM videos from HTML compositions.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HyperFrames

HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The HyperFrames engine captures the page frame-by-frame and encodes to MP4/WebM with FFmpeg.

**Complement to `manim-video`:** Use `manim-video` for mathematical/geometric explainers (equations, 3B1B-style). Use `hyperframes` for motion-graphics, talking-head with captions, product tours, social overlays, shader transitions, and anything driven by real video/audio media.

## When to Use

- User asks for a rendered video from text, a script, or a website
- Animated title cards, lower thirds, or typographic intros
- Captioned narration video (TTS + captions synced to waveform)
- Audio-reactive visuals (beat sync, spectrum bars, pulsing glow)
- Scene-to-scene transitions (crossfade, wipe, shader warp, flash-through-white)
- Social overlays (Instagram/TikTok/YouTube style)
- Website-to-video pipeline (capture a URL, produce a promo)
- Any HTML/CSS/JS animation that must render deterministically to a video file

Do **not** use this skill for:
- Pure math/equation animation (→ `manim-video`)
- Image generation or memes (→ `meme-generation`, image models)
- Live video conferencing or streaming

## Quick Reference

```bash
npx hyperframes init my-video               # scaffold a project
cd my-video
npx hyperframes lint                        # validate before preview/render
npx hyperframes preview                     # live-reload preview (long-lived server, port 3002)
npx hyperframes render --output final.mp4   # render to MP4
npx hyperframes doctor                      # diagnose environment issues
```

The rest: https://github.com/NousResearch/hermes-agent/blob/HEAD/optional-skills/creative/hyperframes/SKILL.md