hyperframes

Create deterministic HTML video compositions with GSAP timelines for Open Design projects.

84.7k|9.9k|Updated Apr 28, 2026
One-click install
npx skills add https://github.com/nexu-io/open-design --skill hyperframes-nexu-io
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/nexu-io/open-design/tree/main/skills/hyperframes
Command: npx skills add https://github.com/nexu-io/open-design --skill hyperframes-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

HyperFrames provides a framework to build deterministic, programmable video compositions inside Open Design using HTML and GSAP timelines, enabling cohesive scene management, transitions, and production-ready outputs.

Core Features & Use Cases

  • Timeline-driven HTML video compositions with deterministic rendering and scene management.
  • Built-in support for captions, TTS narration, and audio-reactive visuals, plus marker-based text emphasis.
  • Suitable for Open Design projects requiring multi-scene video generation, design-system-aligned motion, and scalable prototyping.

Quick Start

Create a minimal 2-scene HyperFrames composition and render a short MP4 to verify the workflow.

Frequently Asked Questions about hyperframes

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

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

HTML video compositions with GSAP timelines are created by defining deterministic, programmable scenes that enforce a finite timeline model for cohesive scene management and transitions. HyperFrames enables this workflow for production-ready outputs.

Can I add captions and TTS narration to multi-scene HTML videos?

Yes, captions and TTS narration can be added to multi-scene HTML videos. The framework provides built-in support for captioning, tts narration, and audio-reactive visuals, plus marker-based text emphasis across multiple scenes.

What is the best way to manage deterministic scene transitions in video generation?

Deterministic scene transitions in video generation are best managed using a finite GSAP-based timeline model. This approach enforces explicit entry and frontmatter requirements for discovery and integration, ensuring cohesive multi-scene rendering.

Do I need sharp and specific frontmatter to render programmatic HTML videos?

Yes, rendering programmatic HTML videos requires sharp for image processing and explicit frontmatter for scene discovery. The framework enforces these entry requirements to maintain deterministic rendering and proper integration.

Does HyperFrames support audio-reactive visuals for design-system-aligned motion?

Yes, HyperFrames supports audio-reactive visuals for design-system-aligned motion. It is suitable for Open Design projects requiring scalable prototyping and multi-scene video generation with cohesive scene management.

Why does my timeline-driven video rendering lack scene cohesion and determinism?

Timeline-driven video rendering lacks determinism when not using a finite GSAP-based timeline model. Enforcing explicit entry and frontmatter requirements ensures cohesive scene management and production-ready outputs.