skills.rest
riipandi
riipandiCOMMUNITY
Explore all skills by this author →
Website𝕏@riipandiGitHub

hyperframes

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, sharp, gsap, 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 — a process prone to layout overlaps, broken timelines, and contrast failures. This Skill provides the complete rule set and reference library for authoring HyperFrames compositions where HTML is the source of truth for video. ## Core Features & Use Cases - HTML Video Compositions: Build scenes with data-attribute timing, GSAP timelines registered to window.__timelines, and deterministic animation rules (no Math.random, no repeat: -1, no async timeline construction). - Captions, TTS, and Audio-Reactive Visuals: Sync per-word captions to transcripts, generate Kokoro-82M voiceovers, and map pre-extracted frequency bands to GSAP properties. - Visual Identity System: Enforce a DESIGN.md gate before writing HTML, with 8 named visual styles (Swiss Pulse, Velvet Standard, Data Drift, and more) plus palette and typography references. - Quality Verification: Run animation-map.mjs to audit choreography, collisions, and dead zones, and contrast-report.mjs for WCAG AA compliance. - Use Case: Ask for a 30-second product launch video with animated stats, synced captions, and scene transitions, and receive a complete lint-clean composition ready for rendering. ## Quick Start Create a HyperFrames video composition with an animated title card, three data stats, and captions synced to my voiceover audio.

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 from HTML and GSAP animations?▼

Write an HTML file with a data-composition-id div, position elements in CSS at their final state, then animate entrances with gsap.from() on a paused timeline registered to window.__timelines. The HyperFrames framework handles clip visibility, media playback, and rendering.

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

Transcribe the audio with whisper, group words by tone and pacing, then time each caption group to transcript timestamps on the GSAP timeline. Every group needs a hard tl.set kill at its end time to guarantee it disappears.

Why does my GSAP timeline not render in the captured video?▼

The capture engine reads window.__timelines synchronously after page load, so timelines built inside async, await, setTimeout, or Promises are missed. Also check that every timeline starts paused and is registered under its composition ID.

Can I use repeat: -1 for looping animations in HyperFrames?▼

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

How do I check text contrast and animation quality before rendering?▼

Run hyperframes validate for a WCAG AA contrast audit that screenshots the composition and samples pixels behind text. Use the animation-map.mjs script to detect collisions, offscreen elements, dead zones, and pacing issues.

Related Skills

Explore More Design & Creative Skills→
Chau165Chau165

media-use

Resolve, generate, and manage BGM, SFX, images, icons, logos, voiceovers, and color grades for HyperFrames video projects.

Community
Advanced
simpletibrsimpletibr
9

hyperframes-cli

Validates, previews, and renders HyperFrames video compositions via the npx CLI.

Official
Intermediate
bwhtechbwhtech

hyperframes

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

Official
Advanced
remotion-devremotion-dev
57.9k

studio-perf

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces.

Official
Intermediate