hyperframes

Create deterministic HyperFrames HTML video compositions with GSAP timelines and data attributes.

182|8|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/compozy/agh --skill hyperframes-compozy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/compozy/agh/tree/main/.agents/skills/hyperframes/hyperframes
Command: npx skills add https://github.com/compozy/agh --skill hyperframes-compozy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill gives a complete, deterministic workflow for turning a video idea into seekable, render-safe HTML+GSAP animations for HyperFrames.

Core Features & Use Cases

  • Composition authoring in HyperFrames HTML: author scenes as HTML with data-* timing attributes, GSAP timelines, and correct media/audio separation.
  • Brand-aligned visual direction: enforce a design system by requiring design.md (or guiding fallback to style presets) before writing any composition HTML.
  • Production-grade motion + transitions: apply non-negotiable guardrails for entrances, scene transitions, timeline registration, and deterministic animation rules.
  • Text, captions, and sync-ready overlays: integrate caption timing workflows, audio-reactive guidance, and typographic safety checks for readable video output.
  • Quality assurance for agents: run lint/validate/inspect style checks and use the animation-map script to catch choreography and layout issues.

Quick Start

Use the hyperframes skill to produce a complete HTML video composition by following the step order in SKILL.md, starting with brand system selection and finishing with GSAP timeline registration.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create deterministic HTML video compositions with GSAP timelines?

You create deterministic HTML video compositions by authoring scenes as HTML with data timing attributes and registering seekable GSAP timelines. This ensures your multi-scene video content remains render-safe with strict synchronous timeline construction and correct media layering.

What are deterministic animations and why do they matter for video rendering?

Deterministic animations ensure visual output remains identical across playback and rendering by enforcing strict synchronous timeline construction and render-safe constraints. They prevent non-deterministic layout shifts or orphaned animations during multi-scene video composition.

Can I use audio-reactive visuals and voiceover in HTML-first video production?

Yes, you can integrate audio-reactive visuals, voiceover, and TTS workflows by applying correct media and audio separation. The composition requires strict adherence to guardrails for synchronous timeline construction and window timeline registration to keep audio synced.

How do I add captions and scene transitions to an HTML video composition?

You add captions and scene transitions by applying specific entrance and transition rules within your GSAP timeline. Caption timing workflows and typographic safety checks ensure readable video output across multi-scene content.

Do I need a design system before writing HTML video composition code?

Yes, you must establish brand-aligned visual direction by requiring a design file before writing any composition HTML. If a design system is unavailable, the workflow guides fallback to style presets to enforce visual consistency.

How do I validate choreography and layout issues in GSAP animations?

You validate choreography and layout issues by running lint, validate, and inspect style checks. Using a dedicated animation-map script catches potential timeline and layout problems before final rendering.