skills.rest
chriswestt
chriswesttCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes

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

Related Skills

Explore More Design & Creative Skills→
paxlabs-incpaxlabs-inc
7

hyperframes

Render HTML, CSS, and GSAP templates into MP4 or WebM videos.

Community
Advanced
Devsoul2026Devsoul2026
150

hyperframes

Render HTML/CSS/JS compositions to MP4/WebM using GSAP timelines.

Community
Advanced
whyiloveher2411whyiloveher2411

hyperframes-media

Automate audio, music, and sound effect asset creation for HyperFrames compositions.

Community
Advanced
47thtechcorner47thtechcorner
21

hyperframes

Render HTML, CSS, and GSAP compositions into video files.

Community
Advanced