skills.rest
Plaidmustache
PlaidmustacheCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes

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
One-click install
npx skills add https://github.com/Plaidmustache/hermes-nulab --skill hyperframes-plaidmustache
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
heygen-comheygen-com
40.2k

hyperframes-cli

Scaffold, lint, preview, and render HTML-based HyperFrames compositions.

Official
Intermediate
tpotttpott

add-subtitles

Embed SRT subtitles into WEBM, MP4, or MKV videos using ffmpeg.

Community
Basic
jkitchinjkitchin
34

video-assembly

Assemble six-scene MP4 videos from images and narrated audio using ffmpeg.

Community
Advanced
SignmanalSignmanal
1

hyperframes

Render HTML/GSAP compositions into MP4 or WebM videos with captions.

Community
Advanced