hyperframes

Name: hyperframes
Availability: InStock
Author: chriswestt

Orchestrate HTML-based video production with GSAP-driven timelines and CLI workflows.

Updated Apr 21, 2026

Search Tags:#video #captions #composition #tts #gsap #audioreactive #hyperframes

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

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 streamlined, end-to-end approach to building HTML-based video content, enabling authors to orchestrate clips, captions, voiceover, and transitions within a single, reproducible workflow.

Core Features & Use Cases

Automates composition authoring, timing, and media management for HTML-based video projects.
Supports syncing captions to audio, generating TTS narration, and creating audio-reactive visuals with beat-sync and glow effects.
Enables animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble) and a variety of scene transitions (crossfades, wipes, reveals, shader transitions).
Useful for marketing, product demos, training, education, and storytelling where consistent, deterministic production is essential.

Quick Start

Load a folder of compositions and run the hyperframes CLI to bootstrap, author, and render a project.

Frequently Asked Questions about hyperframes

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

FAQPage Schema

How do I create HTML video scenes with motion and narration?▼

You create HTML video scenes by orchestrating clips, captions, text-to-speech narration, and transitions on a GSAP-driven timeline. HyperFrames coordinates media management and timing within a single deterministic, reproducible workflow.

Can I sync captions and text-to-speech narration in an HTML video project?▼

Yes, you can sync captions to audio and generate text-to-speech narration within HTML video projects. The system automates timing across multi-scene transitions for consistent, deterministic rendering.

How do I add audio-reactive visuals to a GSAP timeline?▼

Audio-reactive visuals are added by integrating beat-sync and glow effects into a GSAP-driven timeline. This allows visual elements to dynamically respond to audio tracks within HTML-based compositions.

Do I need HTML and CSS knowledge to build animated text and scene transitions?▼

Yes, HTML and CSS knowledge is required. The workflow requires HTML, CSS, and GSAP patterns alongside a guidance ecosystem of references and house style to ensure reproducible rendering and validation.

What is the best way to manage multi-scene transitions for marketing and product demo videos?▼

The best way to manage multi-scene transitions is by orchestrating crossfades, wipes, reveals, and shader transitions on a coordinated timeline. This approach supports marketing, product demos, and training where consistent production is essential.

Why does my HTML video composition fail to render deterministically?▼

Deterministic rendering fails without a proper guidance ecosystem. You need references, house style, and a CLI workflow for end-to-end production to ensure reproducible validation across HTML-based video projects.