hyperframes

Name: hyperframes
Availability: InStock
Author: plaidmustache

Convert HTML video compositions into render-ready MP4/WebM outputs.

Updated May 4, 2026

Search Tags:#captions #tts #gsap #timelines #hyperframes #html-video #shader-transitions

Ready to run

npx skills add https://github.com/Plaidmustache/hermes-nulab --skill hyperframes-plaidmustache

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/Plaidmustache/hermes-nulab/tree/main/optional-skills/creative/hyperframes
Command: npx skills add https://github.com/Plaidmustache/hermes-nulab --skill hyperframes-plaidmustache

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, ffmpeg, npm, hyperframes, puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames enables producing professional-grade videos directly from HTML compositions, eliminating manual assembly of frames, transitions, and captions and ensuring deterministic, reproducible renders.

Core Features & Use Cases

HTML-based video authoring with GSAP timelines and data attributes for precise timing.
Built-in support for captions, TTS narration, audio-reactive visuals, and shader transitions.
Website-to-video workflows (capture a site, design a storyboard, render in MP4/WebM).

Quick Start

Create a HyperFrames composition by running the Init workflow to scaffold a new HTML-based video project and begin authoring your composition.

Frequently Asked Questions about hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert HTML compositions into render-ready MP4 videos?▼

To convert HTML to MP4 videos, you author compositions using GSAP timelines and data attributes for deterministic timing, then render the output to MP4 or WebM formats. The HyperFrames engine drives the rendering pipeline.

Can I add captions and TTS narration to an HTML video project?▼

Yes, you can add captions and TTS narration directly within HTML video projects. Built-in support for captions, TTS narration, audio-reactive visuals, and shader transitions is included in the composition workflow.

What dependencies do I need to render HTML to video with Puppeteer?▼

Rendering HTML to video requires Node, npm, ffmpeg, Puppeteer, and the HyperFrames engine. These dependencies handle project scaffolding, deterministic frame clipping, and final MP4 or WebM output generation.

How do I create a website-to-video workflow using GSAP timelines?▼

Creating a website-to-video workflow involves capturing a site, designing a storyboard, and authoring HTML compositions with GSAP timelines. You then render the deterministic sequences into MP4 or WebM outputs.

Why use data attributes for deterministic video clipping in HTML animations?▼

Data attributes ensure deterministic, reproducible renders by providing precise timing control for HTML animations. This eliminates manual frame assembly and guarantees consistent video output across multiple rendering passes.