Render HTML compositions with GSAP timelines into MP4/WebM videos via FFmpeg.
npx skills add https://github.com/MarbleSodas/Mavis --skill hyperframes-marblesodas
Please help me install this Agent Skill. Skill: hyperframes Source: https://github.com/MarbleSodas/Mavis/tree/main/optional-skills/creative/hyperframes Command: npx skills add https://github.com/MarbleSodas/Mavis --skill hyperframes-marblesodas
HyperFrames turns HTML-driven motion graphics into deterministic rendered video (MP4/WebM), so you can produce captioned, audio-reactive, brand-consistent videos without building a bespoke rendering pipeline.
Use HyperFrames to render an HTML composition into a final MP4 by running the init-and-render workflow and pointing the output to final.mp4 for your authored scenes.
High-intent search queries and answers about installing and using this skill.
You render motion graphics video from HTML by authoring compositions with GSAP timelines and timing metadata, then using a frame-capture and FFmpeg encoding pipeline to output final MP4 or WebM files.
Yes, you can add synchronized TTS narration and captions to HTML animations by generating TTS audio, transcribing it for word-level captions, and keeping caption groups tightly scoped to prevent visual leaks during video rendering.
Yes, rendering HTML compositions into MP4 requires Node.js >= 22, FFmpeg, and Puppeteer-managed chrome-headless-shell to execute the frame-capture and video encoding pipeline effectively.
Deterministic video rendering for GSAP timelines works by requiring composition HTML to register animations synchronously via window.__timelines, honoring specific authoring rules so frame-capture produces consistent, repeatable MP4 outputs.
The best way to create audio-reactive visuals and scene transitions in HTML is authoring deterministic scenes driven by video or audio inputs, then rendering the complete composition through the FFmpeg encoding pipeline.
Limitations of rendering HTML animations to video include the requirement for deterministic authoring rules, synchronous GSAP timeline registration via window.__timelines, and strict dependencies on specific versions of Node.js and Puppeteer-managed chrome-headless-shell.
heysuhasRender HTML, CSS, and GSAP animations into MP4 or WebM videos.
SriRamkunamsettyRender HTML-based video compositions into MP4/WebM outputs.
robertbr123Generate animated video compositions from HTML with GSAP timelines and FFmpeg.
projectedanxGenerate MP4 and WebM videos from HTML, CSS, and GSAP animations.
