skills.rest
lsongdev
lsongdevCOMMUNITY
Explore all skills by this author →
Website𝕏@lsongdevGitHub

hyperframes

Create HTML-based video compositions with GSAP timelines, captions, transitions, and audio-reactive visuals.

Updated Jul 20, 2026
Search Tags:#captions#motion graphics#gsap#scene transitions#video composition#audio-reactive#html animation
One-click install
npx skills add https://github.com/lsongdev/skills --skill hyperframes-lsongdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/lsongdev/skills/tree/main/hyperframes
Command: npx skills add https://github.com/lsongdev/skills --skill hyperframes-lsongdev

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building programmatic video content requires coordinating HTML structure, GSAP animation timing, captions, audio, and scene transitions, which is error-prone without a structured framework and clear rules. ## Core Features & Use Cases - HTML Video Compositions: Define video scenes as HTML files with data-* timing attributes, GSAP timelines registered in window.__timelines, and CSS-driven layouts. - Captions, TTS, and Audio-Reactive Visuals: Sync per-word captions to transcripts, generate Kokoro-82M narration, and map pre-extracted audio frequency bands to GSAP properties. - Quality Tooling: Run animation-map.mjs to audit choreography (staggers, dead zones, collisions) and contrast-report.mjs for WCAG contrast validation. - Use Case: A user asks for a 30-second product launch video with a dark premium style, animated stats, synced captions, and shader transitions between three scenes; the skill guides layout-first authoring, style selection from 8 named presets, and validation before rendering. ## Quick Start Ask the agent to create a HyperFrames video composition, for example: create a 15-second animated title card video with bold typography and a fade transition using the hyperframes skill.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create an HTML-based video with GSAP animations?▼

Write an HTML file with a data-composition-id div, data-start and data-duration attributes on clips, and a paused GSAP timeline registered in window.__timelines. Build the end-state layout in CSS first, then add gsap.from() entrances and let transitions handle exits.

How do I add captions synced to audio in a video composition?▼

Transcribe the audio to get word-level timestamps, group words by tone (2-3 words for high energy, 4-6 for calm), and animate each group on the GSAP timeline. Every caption group needs a hard tl.set kill at its end time to guarantee it disappears.

Why does my HyperFrames composition render blank or break?▼

Common causes include using a <template> wrapper on the standalone index.html, forgetting window.__timelines registration, building timelines inside async code, or using repeat: -1 which breaks the capture engine. Run npx hyperframes lint and validate to catch these.

Can I use infinite repeat animations in GSAP video timelines?▼

No, repeat: -1 breaks the capture engine. Calculate the exact finite repeat count from the composition duration using repeat: Math.floor((DURATION - startTime) / cycleDuration) - 1.

How do I make visuals react to music in a video?▼

Pre-extract audio frequency band data with extract-audio-data.py, then sample it per frame using tl.call() in a loop mapped to GSAP properties like scale, opacity, or textShadow. Web Audio API and runtime analysis are not supported since rendering must be deterministic.

What are the limitations of HTML video compositions versus traditional editors?▼

Compositions must be fully deterministic with no Math.random() or Date.now(), media playback is framework-controlled, and exit animations before transitions are banned. Multi-axis charts and dashboard-style layouts are discouraged since viewers cannot study them in short windows.

Related Skills

Explore More Design & Creative Skills→
bwhtechbwhtech

hyperframes

Create timed video compositions with HTML, CSS, and GSAP.

Official
Advanced
OpenMinisOpenMinis
361

hyperframes-cli

Automate HyperFrames CLI workflows from initialization to rendering.

Official
Advanced
boraoztuncboraoztunc
248

hyperframes-media

Preprocess HyperFrames assets with Kokoro TTS, Whisper transcription, and u2net background removal.

Community
Intermediate
chmonitorchmonitor
255

remotion-to-hyperframes

Translate Remotion React compositions into HyperFrames HTML and GSAP timelines.

Official
Advanced