hyperframes

# 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 ...