claudegoodies
Skill

hyperframes

From NousResearch

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

Renders HTML+GSAP+CSS compositions into MP4/WebM video via a CLI that captures frames with headless Chrome and encodes with FFmpeg.

Use it when

  • User wants a rendered video from an HTML script or webpage
  • Building animated title cards, lower thirds, or social overlays
  • Producing captioned talking-head videos with TTS narration synced to audio
  • Creating audio-reactive visuals or shader-based scene transitions

Skip it if

  • Need pure math/equation animation instead (use manim-video skill)
  • Requires Node.js >=22, FFmpeg, and global npm install of hyperframes CLI
  • Not for image generation, memes, or live streaming/video conferencing

Facts

Repository
NousResearch/hermes-agent
Status
Actively maintained
Last commit
Source file
optional-skills/creative/hyperframes/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# 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 hyperframe
View full source on GitHub →

Other skills