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

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