hyperframes-core

Manage HTML and GSAP composition structure, timing, and media playback.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch --skill hyperframes-core-x-rankflow-media-group
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch/tree/main/.agents/skills/hyperframes-core
Command: npx skills add https://github.com/X-RANKFLOW-MEDIA-GROUP/masseurmatch --skill hyperframes-core-x-rankflow-media-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires GSAP, HyperFrames, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for building renderable projects, offering structure, timing, and animation controls to create dynamic visual compositions.

Core Features & Use Cases

  • Composition Structure: Defines the composition's structure and timing using data-* attributes.
  • Media Integration: Supports video, audio, and images directly within compositions.
  • Sub-Compositions: Ability to embed other compositions, creating modular and reusable components.
  • Use Case: Design a promotional video for a product launch, using HyperFrames to manage the composition structure, timing, and visual elements.

Quick Start

To build a basic composition, start by creating an HTML file with a data-composition-id attribute. Include the media and elements you want to animate, then use GSAP for the animations.

Frequently Asked Questions about hyperframes-core

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

FAQPage Schema
How do I manage composition timing and structure in HTML with GSAP?

To manage composition timing and structure in HTML with GSAP, you can use the HyperFrames contract to define composition elements using data-* attributes and control timeline playback via window.__timelines.

Can I embed sub-compositions within a GSAP animation project?

Yes, you can embed sub-compositions within a GSAP animation project. HyperFrames supports embedding other compositions directly, allowing you to create modular and reusable visual components within your main renderable project.

How do I build a renderable composition using HTML and data attributes?

You build a renderable composition by creating an HTML file with a data-composition-id attribute, adding your media elements, and using GSAP for animations, with HyperFrames managing the overall structure and playback.

Do I need to know GSAP and HTML to use the HyperFrames composition contract?

Yes, using the HyperFrames composition contract requires prior knowledge of HTML, GSAP, and HyperFrames composition syntax to effectively manage timing, structure, and media playback within your renderable projects.

How does HyperFrames handle media integration in visual compositions?

HyperFrames handles media integration by supporting video, audio, and images directly within your visual compositions, allowing you to synchronize and manage their playback alongside GSAP animations through the window.__timelines object.

What is the best way to create a promotional video with HTML and GSAP timing controls?

The best way to create a promotional video with HTML and GSAP timing controls is to use HyperFrames to manage the composition structure, timing, and visual elements, embedding media directly within the data-* attribute framework.