hyperframes

Name: hyperframes
Availability: InStock
Author: scanbott

Orchestrate HTML video compositions by coordinating GSAP timelines with HyperFrames.

Updated Apr 21, 2026

Search Tags:#html #video #captions #composition #transitions #gsap #hyperframes

Ready to run

npx skills add https://github.com/scanbott/claude-skills --skill hyperframes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/scanbott/claude-skills/tree/main/hyperframes
Command: npx skills add https://github.com/scanbott/claude-skills --skill hyperframes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames provides a robust framework to author, choreograph, and render HTML-based video compositions, reducing the complexity of coordinating scenes, timing, and media across multiple clips.

Core Features & Use Cases

Compose HTML scenes with GSAP timelines, data attributes, and sub-components for video, audio, captions, and transitions.
Support deterministic, load-driven rendering for multi-scene productions, captions, and TTS narration.
Use cases include marketing promos, product demos, training explainers, and data-rich visual stories.

Quick Start

Create a new composition by dropping your HTML scene structure into a folder and wiring up a timeline under window.__timelines.

Frequently Asked Questions about hyperframes

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

FAQPage Schema

How do I choreograph multi-scene HTML video with GSAP timelines?▼

You can choreograph HTML video by coordinating GSAP timelines with a structured data model to manage deterministic timing, resource loading, and safe scene transitions across multiple clips.

What is the best way to add captions and voiceover to an HTML video composition?▼

To add captions and voiceover to an HTML video composition, you can use a structured data model with frontmatter-driven entry points that synchronizes TTS narration and subtitle tracks deterministically.

Does HyperFrames support deterministic rendering for product demos and marketing promos?▼

Yes, HyperFrames supports deterministic, load-driven rendering specifically designed for multi-scene productions like product demos, marketing promos, and training explainers.

Can I use GSAP transitions and data attributes to build audio-reactive visuals?▼

Yes, you can compose HTML scenes using GSAP timelines, data attributes, and sub-components to create audio-reactive visuals that respond deterministically across your video composition.

How do I start creating a video composition using HTML scenes and GSAP?▼

To start creating a video composition, drop your HTML scene structure into a folder and wire up your GSAP timeline under the window.__timelines object to orchestrate the rendering.

Do I need sharp and @hyperframes/producer to render HTML-based video?▼

Yes, the framework relies on @hyperframes/producer to orchestrate the video rendering pipeline and sharp to handle image processing within the composition workflow.