hyperframes

Compile HTML-driven GSAP timelines into deterministic video frames.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/cvenwu/AiFlow --skill hyperframes-cvenwu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/cvenwu/AiFlow/tree/main/skills/hyperframes
Command: npx skills add https://github.com/cvenwu/AiFlow --skill hyperframes-cvenwu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node:fs/promises, node:path, @hyperframes/producer, sharp, and includes scripts (resource) components.

What problem does it solve?

HyperFrames provides a deterministic HTML-based workflow to design, render, and compose video scenes that are reproduced identically on every run, reducing guesswork and pipeline fragility.

Core Features & Use Cases

  • Deterministic rendering of multi-scene video compositions from HTML with GSAP timelines.
  • Design-to-render flow covering design, layout, motion, and shader/CSS transitions for video-ready outputs.
  • Use cases: building explainer videos, marketing reels, data-driven visuals, captions, and TTS narration.

Quick Start

Create a minimal HTML composition with a title card and render it into a video.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I render deterministic video scenes from HTML using GSAP timelines?

Deterministic video scenes are rendered by compiling HTML-driven GSAP timelines into reproducible frames through a fixed rendering pipeline, guaranteeing identical outputs across multiple runs.

Can I build multi-scene explainer videos with captions and TTS narration?

Multi-scene explainer videos support captions, TTS narration, and audio-reactive visuals. The workflow handles design, layout, motion, and shader or CSS transitions for video-ready outputs.

What is the best way to create reproducible marketing reels without pipeline fragility?

Reproducible marketing reels are created using a deterministic HTML-based workflow that compiles multi-scene compositions into video frames, reducing guesswork and pipeline fragility.

Does the video composition pipeline support shader transitions and data-driven visuals?

The video composition pipeline supports shader transitions, CSS transitions, and data-driven visuals. It automates the generation of deterministic scenes suitable for explainer and branding videos.

Do I need a SKILL.md frontmatter to generate video-ready outputs?

A SKILL.md frontmatter with name and description fields is required. This frontmatter initiates the fixed rendering pipeline that compiles HTML compositions into deterministic video frames.