What problem does it solve? Creating motion-graphics videos traditionally requires specialized video editing software and manual timeline work. This Skill turns HTML, CSS, and GSAP animations into deterministically rendered MP4/WebM video files, letting you produce captioned narration videos, product promos, social overlays, and website-to-video content entirely from code. ## Core Features & Use Cases - HTML-to-Video Rendering: Author compositions as HTML files with data-* timing attributes and GSAP timelines, then capture frame-by-frame and encode to MP4/WebM via FFmpeg. - TTS, Captions & Audio-Reactive Visuals: Generate local Kokoro TTS narration in 8 languages, transcribe with Whisper for word-level captions, and drive visuals from pre-extracted audio frequency bands. - Website-to-Video Pipeline: Capture any URL into screenshots, design tokens, and assets, then follow a 7-step workflow (DESIGN.md, SCRIPT.md, storyboard, composition, render) to produce a promo video. - Use Case: A user provides a product landing page URL and asks for a 30-second social ad. The Skill captures the site, extracts its brand colors and fonts, generates a TTS narration script, builds a multi-scene composition with shader transitions, and renders a final 1080p MP4. ## Quick Start Ask the agent to render a short promotional video from a script or website URL, and it will scaffold a HyperFrames project, build the composition, and render the final MP4.
