skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes

Create HTML-based video compositions with GSAP animations, captions, and scene transitions.

Updated Oct 16, 2025
Search Tags:#captions#motion design#scene transitions#video composition#hyperframes#html video#gsap animation
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill hyperframes-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/hyperframes
Command: npx skills add https://github.com/hugotown/dotfiles --skill hyperframes-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Producing polished video content normally requires dedicated editing software and manual timeline work. This Skill lets you author videos as HTML files — using data attributes for timing, GSAP timelines for animation, and CSS for styling — so video production becomes a code-driven, deterministic workflow. ## Core Features & Use Cases - Composition Authoring: Build multi-scene videos with title cards, overlays, captions synced to audio, voiceovers, audio-reactive visuals, and scene transitions (crossfades, wipes, shader effects). - Design System Integration: Reads a project's design.md for brand colors and fonts, or falls back to 8 named visual style presets and house-style palettes. - Quality Verification: Runs lint, validate (WCAG contrast), inspect (layout overflow), and an animation-map script that reports tween choreography, collisions, and dead zones. - Use Case: Ask for a 30-second product launch video with synced captions and a shader transition on the hero reveal; the Skill plans the beat rhythm, writes the HTML composition, and verifies it with the built-in checks. ## Quick Start Create a HyperFrames video composition for a product launch with a title card, animated stats, and captions synced to my audio file.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create a video composition in HTML with GSAP?▼

Define a div with data-composition-id, data-width, and data-height, add clips with data-start, data-duration, and data-track-index, then build a paused GSAP timeline and register it on window.__timelines. The framework handles clip visibility, media playback, and timeline sync.

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

Use a transcript with per-word start and end timestamps, group words by energy level, and animate each group on the GSAP timeline. Every caption group needs a hard tl.set kill at its end time, and fitTextFontSize prevents text overflow.

Can I reuse a composition with different text or colors?▼

Yes. Declare variables with data-composition-variables on the html root, read them with window.__hyperframes.getVariables(), and override at render time with npx hyperframes render --variables or per-instance data-variable-values on sub-composition hosts.

Why does my HyperFrames composition render empty or break?▼

Common causes include forgetting window.__timelines registration, building timelines inside async or setTimeout, using repeat: -1, or wrapping a standalone composition in a template tag. The capture engine reads timelines synchronously after page load.

What are the rules for scene transitions in multi-scene videos?▼

Every scene change must use a transition, every element must enter via gsap.from(), and exit animations are banned except on the final scene. The transition itself is the exit, so outgoing content must stay fully visible until it fires.

How do I verify animation quality before rendering?▼

Run npx hyperframes lint and validate for errors and WCAG contrast, npx hyperframes inspect for layout overflow, and the animation-map.mjs script for tween summaries, collision flags, stagger detection, and dead zones.

Related Skills

Explore More Design & Creative Skills→
makyua-sanmakyua-san

design-consultation

Generate DESIGN.md with typography, color, spacing, and motion tokens.

Community
Advanced
hoanghd218hoanghd218
3

make-a-video

Create end-to-end video production workflows from concepts to MP4 outputs.

Community
Advanced
libz-renlab-ailibz-renlab-ai
13

hyperframes-media

Preprocess media assets with text-to-speech, transcription, and background removal.

Community
Intermediate
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate