Agent skill · creative production · nousresearch
hyperframes
Render MP4/WebM videos from HTML compositions.
Why this skill is useful
Adds specific commands and workflows for rendering HTML compositions to video formats that the AI wouldn't reliably generate on its own.
What it needs
Requires ffmpeg, node installed locally. About 8k tokens when loaded. Last updated 2026-08-07. 226,679 stars on the source repository.
What this skill does
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 preview is a long-lived Next.js server that holds Chrome render workers open. Always stop it when done (see Cleanup) — a forgotten preview keeps idle chrome-headless-shell workers alive that, on GPU-less hosts (WSL, containers, CI), spin a CPU core each indefinitely via software WebGL (swiftshader). Render flags: --quality draft standard high · --fps 24 30 60 · --format mp4 webm · --docker (reproducible) · --strict. Full CLI reference: references/cli.md. Setup (one-time) The script: 1. Verifies Node.js >= 22 and FFmpeg are installed (prints fix instructions if not). 2. Installs the hyperframes CLI globally (npm install -g hyperframes@>=0.4.2). 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/hyperframes