skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes

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

Updated Mar 4, 2026
Search Tags:#captions#video generation#motion design#gsap#scene transitions#hyperframes#html animation
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill hyperframes-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/hyperframes
Command: npx skills add https://github.com/gmolike/Claude-Template --skill hyperframes-gmolike

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 where data attributes define timing, GSAP timelines drive animation, and CSS controls appearance, turning video production into a code-driven workflow. ## Core Features & Use Cases - Composition Authoring: Build multi-scene videos with data-attribute timing, sub-compositions, parametrized variables, and deterministic GSAP timelines. - Captions and Audio-Reactive Visuals: Add word-synced captions, karaoke effects, TTS narration, and animations driven by pre-extracted audio frequency data. - Design System Integration: Enforce brand consistency via design.md files, 8 named visual style presets, WCAG contrast validation, and layout inspection tooling. - Use Case: A marketing team needs a 30-second product launch teaser with animated stats, synced captions, and shader transitions. Describe the video, and the Skill scaffolds the composition, applies the brand palette, choreographs scene rhythm, and validates the output with lint, inspect, and animation-map checks. ## Quick Start Ask the AI to create a 15-second product launch video with a title card, animated stats, and captions 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 a video composition in HTML with GSAP?▼

Define a div with data-composition-id, data-width, and data-height, then add clips with data-start, data-duration, and data-track-index attributes. Build a paused GSAP timeline, register it in window.__timelines under the composition ID, and the framework handles playback and rendering.

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

Provide a transcript with per-word start and end timestamps, group words by tone and pacing, 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 on the root html element with data-composition-variables, read them via 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 animation not render or capture correctly?▼

Common causes include building timelines inside async code or setTimeout, using repeat: -1, forgetting window.__timelines registration, or animating visibility instead of opacity. The capture engine reads timelines synchronously after page load, so all construction must be synchronous and deterministic.

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

Every scene change must use a transition such as a crossfade, wipe, or shader effect, and every element must enter via gsap.from(). Exit animations are banned except on the final scene, because the transition itself serves as the exit for outgoing content.

Related Skills

Explore More Design & Creative Skills→
Lev-itLev-it

hyperframes-media

Automates HyperFrames asset preprocessing including speech synthesis, music generation, transcription, background removal.

Official
Advanced
Noetfield-SystemsNoetfield-Systems

website-to-video

Capture a website and produce a HyperFrames video from its brand assets and visuals.

Official
Advanced
openaiopenai
5.3k

hyperframes

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

Official
Advanced
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate